/* ================================ TISKREAED KAMPAANIA POPUP Tekst ja punane riba on HTML/CSS, mitte pildi sees. Varvid ja nurk on disainist voetud - kinnita disaineriga ule. ================================ */ :root { --tr-popup-teal: #1f4a44; --tr-popup-red: #e1251b; /* * Disainis laskub riba vasakult paremale, mitte touseb. Moootsin * disainipildilt: 890 px laiuse peale 62 px langust = ~4 kraadi. * NB lehe oma kampaaniariba touseb (-6deg) - popupil on teine suund. */ --tr-popup-angle: 4deg; } .tr-popup[hidden] { display: none; } /* * Kerimise lukk. overflow: hidden peidab kerimisriba ja padding * hoiab tavalise sisu paigal, aga fikseeritud elemendid (pais, kampaania- * riba) motmoodavad ennast viewpordi jargi ja laienevad vabanenud riba * kohale. Neile anname sama kompensatsiooni, muidu pais hupab lahti. */ html.tr-popup-lock .header-all, html.tr-popup-lock .tr-campaign { width: calc( 100% - var( --tr-sb, 0px ) ); } .tr-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 12px; opacity: 0; transition: opacity 0.28s ease; } .tr-popup.is-open { opacity: 1; } /* * Sulgemise ja hidden'i vahel jaab kate 300 ms peale. Ilma selleta * laheks kohe parast sulgemist tehtud klopp nahtamatusse tausta. */ .tr-popup.is-closing { pointer-events: none; } .tr-popup__backdrop { position: absolute; inset: 0; background: rgba(12, 28, 26, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* * Raam ei loika midagi ara - sulgemisnupp saab lauaarvutis dialoogi kohal * olla. Dialoogil endal on overflow: hidden, mida punase riba nurkade * loikamiseks vaja on, ja see loikas varem ka nupu ara. */ .tr-popup__frame { position: relative; /* Disainis oli popup 85% vaate laiusest, mitte fikseeritud 1040 px. */ width: min( 100%, 1180px ); } .tr-popup__dialog { position: relative; max-height: calc(100vh - 96px); overflow: hidden auto; background: var(--tr-popup-teal); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); transform: translateY(14px) scale(0.985); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .tr-popup.is-open .tr-popup__dialog { transform: none; } /* Sulgemisnupp: lauaarvutis dialoogi kohal, kitsal ekraanil sees nurgas */ .tr-popup__close { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; opacity: 0.9; transition: opacity 0.2s ease; /* Ilma ringita, aga peab ka heleda pildi peal nahtav olema. */ filter: drop-shadow( 0 1px 3px rgba(0, 0, 0, 0.55) ); } /* * Teema globaalne reegel on `button:hover { transform: translateY(4px); * background-color: #429289; border: 3px solid #429289 }`. Selle * spetsiifilisus on 0,1,1 ja .tr-popup__close on 0,1,0 - ehk teema * voitis hover'i hetkel ja X sai taidetud kasti ning nihkus 4 px alla. * Loetleme seisud eraldi, siis on spetsiifilisus 0,2,0 ja meie voidame. */ .tr-popup__close:hover, .tr-popup__close:focus, .tr-popup__close:active { padding: 0; border: 0; background: transparent; transform: none; box-shadow: none; } .tr-popup__close:hover { opacity: 1; } /* Fookusring ainult klaviatuuriga liikujale, ja siis nelinurkne. */ .tr-popup__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .tr-popup__dialog:focus { outline: none; } .tr-popup__body { display: grid; grid-template-columns: 1fr; } .tr-popup__text { /* Mobiilis on punane riba pildi peal, seega tekstiplokk ei vaja ruumi alla. */ padding: 30px 24px 26px; color: #fff; } .tr-popup__heading { display: block; line-height: 1.12; } .tr-popup__line { display: block; font-size: clamp(22px, 5.4vw, 34px); font-weight: 500; } .tr-popup__highlight { display: block; margin-top: 2px; font-size: clamp(38px, 10vw, 62px); font-weight: 800; line-height: 1; letter-spacing: -0.01em; } .tr-popup__note { margin: 18px 0 0; font-size: clamp(15px, 3.8vw, 18px); line-height: 1.35; color: rgba(255, 255, 255, 0.92); } .tr-popup__cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, 0.85); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .tr-popup__cta:hover, .tr-popup__cta:focus-visible { background: #fff; color: var(--tr-popup-teal); } .tr-popup__media { position: relative; /* * Lahtepilt on ruudukujuline (792x792). Mobiilis andis vaba korgus * ~1,8:1 riba, mis loikas pildist enamiku ara. 4:3 hoiab maja ja auto * kaadris. Lauaarvutis taidab pilt korvalveeru tais korguses. */ aspect-ratio: 4 / 3; } .tr-popup__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Punane diagonaalriba - sama zest nagu lehe kampaaniariba */ .tr-popup__band { position: absolute; left: -6%; right: -6%; bottom: 9%; z-index: 2; display: flex; flex-direction: column; gap: 1px; /* * Riba ulatub 6% dialoogist valjapoole. Tekst peab jaama servast * sissepoole - disainis oli see ~7,5% popupi laiusest, seega * 6% ulatus + 7,5% = 13,5%. */ padding: 9px 13.5% 10px; background: var(--tr-popup-red); color: #fff; transform: rotate(var(--tr-popup-angle)); pointer-events: none; } .tr-popup__band-main { font-size: clamp(19px, 5vw, 27px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; } .tr-popup__band-sub { font-size: clamp(13px, 3.4vw, 16px); font-weight: 500; line-height: 1.2; } /* ---- Lauaarvuti: kaks veergu, riba serv servani ---- */ @media ( min-width: 861px ) { .tr-popup { padding: 24px; } .tr-popup__body { grid-template-columns: 1.15fr 1fr; min-height: 420px; } .tr-popup__text { padding: 56px 7% 120px; display: flex; flex-direction: column; justify-content: center; } .tr-popup__close { /* * Dialoog voib ulatuda kuni calc(100vh - 96px), seega tema kohale * jaab luhikesel ekraanil 48 px. Nupp on 44 px korge: -52px oleks * noudnud 52 px ja ulemine serv oleks ekraanist valja jaanud. */ top: -48px; right: 0; } .tr-popup__band { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; bottom: 12%; padding: 11px 13.5%; } .tr-popup__band-sub { text-align: right; } .tr-popup__media { aspect-ratio: auto; } } @media ( prefers-reduced-motion: reduce ) { .tr-popup, .tr-popup__dialog { transition: none; } }