/*! * Ever Widgets — stylesheet * Everything the 1 signed-off widgets need, in one file, loaded once per page. * * TO RESTYLE EVERY WIDGET AT ONCE: edit the :root block below. * Widgets also carry hard-coded fallbacks, so nothing white-screens * if a token goes missing. * * Body text says font-family:inherit, so widgets take Karla from the * theme. Only Playfair Display and Licorice are named by hand. */ :root{ --ev-cream:#FBF8F3; --ev-oat:#F6F0E6; --ev-oat-2:#F0E8DA; --ev-blush:#F7EBE4; --ev-rule:#EBDFD3; --ev-rule-2:#DCCCBB; --ev-taupe:#A9937C; --ev-taupe-d:#8A7460; --ev-bronze:#9C7B48; --ev-rose:#B0827C; --ev-sage:#7C8B77; --ev-ink:#453F3A; --ev-ink-2:#726A63; --ev-ink-3:#A69D94; --ev-display:"Playfair Display",Georgia,"Times New Roman",serif; --ev-hand:"Licorice","Segoe Script",cursive; --ev-r:14px; --ev-r-lg:22px; } /* ---------- shared primitives ---------- */ .ev{ font-family:inherit; /* inherits Karla from your theme */ color:var(--ev-ink,#453F3A); /* No vertical margin, ever. Spacing above and below a widget is the article's business — add a spacer block where you want one. Widgets only ever set space on their left and right. */ margin:0; -webkit-text-size-adjust:100%; } .ev > :first-child{margin-top:0} .ev > :last-child{margin-bottom:0} .ev *{box-sizing:border-box} /* THEME ARMOUR — do not delete, and do not "simplify" the doubled class. Themes style the content area with rules like `.entry-content p{margin:0 0 1.5em}`. That selector has specificity (0,1,1); a plain `.ev-visited__l1{margin:0}` is (0,1,0), so the THEME WINS and opens a gap in the middle of the widget. That is exactly what happened on the live site: the badge grew from 84px to 121px and the stamp stopped looking centred against the text. Repeating the class — `.ev.ev p` — is (0,2,1), which beats the theme without a single !important and without touching markup already published. */ .ev.ev p, .ev.ev ul, .ev.ev ol, .ev.ev li, .ev.ev dl, .ev.ev dt, .ev.ev dd, .ev.ev figure, .ev.ev blockquote, .ev.ev h2, .ev.ev h3, .ev.ev h4, .ev.ev table{ margin:0; padding:0; } .ev.ev, .ev.ev span, .ev.ev p, .ev.ev li{line-height:1.55} .ev.ev :where(b,strong){font-weight:700} .ev.ev :where(a){text-decoration:none} .ev-h{ font-family:var(--ev-display,Georgia,serif);font-weight:500; font-variant:small-caps;letter-spacing:.045em; font-size:clamp(21px,4.4vw,27px);line-height:1.2; text-align:center;margin:0 0 6px;color:var(--ev-ink,#453F3A); } .ev-script{ font-family:var(--ev-hand,cursive);font-size:clamp(25px,5.6vw,32px); line-height:1.05;text-align:center;color:var(--ev-taupe,#A9937C);margin:0 0 14px; } .ev-sub{text-align:center;font-size:12.5px;line-height:1.5;color:var(--ev-ink-3,#A69D94);margin:0 0 20px} .ev-lbl{font-size:10px;letter-spacing:.19em;text-transform:uppercase;font-weight:700;color:var(--ev-taupe,#A9937C)} .ev-pill{ display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; font-weight:700;padding:5px 12px;border-radius:999px; background:var(--ev-oat,#F6F0E6);color:var(--ev-taupe-d,#8A7460); } .ev-a{ display:inline-block;font-weight:700;font-size:15px;text-decoration:none; color:var(--ev-ink,#453F3A);padding-bottom:5px; border-bottom:2px solid var(--ev-bronze,#9C7B48);transition:color .18s; } .ev-a:hover,.ev-a:focus-visible{color:var(--ev-bronze,#9C7B48)} .ev :focus-visible{outline:2px solid var(--ev-bronze,#9C7B48);outline-offset:3px;border-radius:4px} .ev-orn{display:block;width:100%;max-width:400px;height:14px;margin:0 auto 18px;color:var(--ev-rule-2,#DCCCBB)} @media(prefers-reduced-motion:reduce){.ev *{transition:none !important;animation:none !important}} /* ---------- Visited badge · .ev-visited ---------- */ /* One hairline, underneath only. Whatever sits above the badge — a feature * photo, a title — already has an edge of its own, and two horizontal lines a * few pixels apart only argue with each other. Kept in step with the inline * `wrap` style in blocks/visited/block.php: the inline one wins on a live page, * this is what catches a frozen copy saved before the change. */ .ev-visited{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; border-top:0;border-bottom:1px solid var(--ev-rule,#EBDFD3); padding:4px 0 15px;margin:0; } .ev-visited__av{ width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden; background:var(--ev-oat,#F6F0E6);margin-right:4px; } .ev-visited__av svg{display:block;width:100%;height:100%} .ev-visited__main{flex:1 1 240px;min-width:0} .ev.ev .ev-visited__l1{margin:0;font-size:14.5px;line-height:1.5;color:var(--ev-ink,#453F3A)} .ev.ev .ev-visited__l2{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ev-ink-3,#A69D94);display:flex;gap:3px 16px;flex-wrap:wrap} .ev-visited__l2 span{display:flex;align-items:center;gap:6px} .ev-visited__l2 svg{color:var(--ev-taupe,#A9937C);flex:none} .ev-visited__stamp{ flex:none;position:relative;display:inline-flex;flex-direction:column;align-items:center; padding:9px 18px;border-radius:5px; border:1.5px solid var(--ev-bronze,#9C7B48);color:var(--ev-bronze,#9C7B48); /* INWARDS, as agreed — the stamp sits on the right, so leaning in means leaning toward the text, which is anticlockwise, which is a NEGATIVE angle in CSS. It shipped as +3deg, i.e. leaning away. */ transform:rotate(-3deg); } .ev-visited__stamp:not(:has(.ev-visited__stampin))::before{ content:"";position:absolute;inset:3px;border:1px solid currentColor; border-radius:3px;opacity:.4;pointer-events:none; } .ev-visited__stamp b{font-family:var(--ev-display,Georgia,serif);font-size:18px;font-weight:500;line-height:1;font-variant-numeric:lining-nums} .ev-visited__stamp>span:last-child{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-top:4px} @media(max-width:520px){ .ev-visited{gap:11px;flex-wrap:nowrap;align-items:center} .ev-visited__av{width:38px;height:38px;margin-right:3px} .ev-visited__main{flex:1 1 auto;min-width:0} .ev-visited__stamp{flex:none;padding:7px 12px} .ev-visited__stamp b{font-size:15px} .ev-visited__stamp>span:last-child{font-size:7.5px;letter-spacing:.17em} } /* ---------- Section marks · .ev-mark ---------- * * These selectors exist so the DESIGN can be changed centrally. Every mark * already carries its whole drawing in a style attribute, which is what keeps * articles intact if the plugin goes away; an author stylesheet with * !important outranks a non-important inline style, so while the plugin is * here these rules are what is actually seen. Ship a new version and every * article changes at once — no post is reopened, nothing is re-saved. */ hr.ev-mark{ display:block !important; box-sizing:border-box !important; border:0 !important; padding:0 !important; min-height:0 !important; overflow:visible !important; opacity:1 !important; clear:both !important; background-color:transparent !important; background-repeat:no-repeat !important; background-position:center !important; } /* NOT height, and NOT width. Both used to be pinned here, from when the marks * were sized by aspect-ratio and always filled the column. The flourish now has * a set height and a set width, and the height:auto override flattened it to * nothing — the mark was invisible on the front end while looking right in the * editor. Every property left above is one a theme is likely to set on a rule * element, and none of them is a setting. */ /* Themes like to hang decoration off hr with a pseudo-element. */ hr.ev-mark::before, hr.ev-mark::after{ content:none !important; display:none !important; } /* The H2 mark's artwork is NOT pinned here any more: its colour and its size are * settings, and the block renders the current version live. Pinning it would * have meant the stylesheet quietly overriding the setting with whatever colour * happened to be baked in at build time. */ hr.ev-mark--h2{ margin-left:auto !important; margin-right:auto !important; } /* The marks are now drawn into the page as real rather than stretched * background pictures — seven times cheaper to paint while a window is being * dragged. The hr rules above stay exactly as they are so that marks saved by * an older version keep working untouched; these are the same guarantees for * the new shape. */ div.ev-mark{ display:block !important; box-sizing:border-box !important; border:0 !important; padding:0 !important; overflow:visible !important; opacity:1 !important; clear:both !important; background:none !important; line-height:0 !important; } div.ev-mark > svg{ display:block !important; width:100% !important; height:auto !important; } div.ev-mark::before, div.ev-mark::after{ content:none !important; display:none !important; } div.ev-mark--h2, div.ev-mark--h3{ margin-left:auto !important; margin-right:auto !important; } hr.ev-mark--h3{ aspect-ratio:400/24 !important; background-size:contain !important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20400%2024%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id=%22fl%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23C9B49E%22%20stop-opacity=%220%22/%3E%20%3Cstop%20offset=%22.55%22%20stop-color=%22%23C9B49E%22%20stop-opacity=%221%22/%3E%3C/linearGradient%3E%20%3ClinearGradient%20id=%22fr%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%22.45%22%20stop-color=%22%23C9B49E%22%20stop-opacity=%221%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23C9B49E%22%20stop-opacity=%220%22/%3E%3C/linearGradient%3E%20%3C/defs%3E%20%3Crect%20x=%226%22%20y=%2211.4%22%20width=%22170%22%20height=%221.2%22%20fill=%22url%28%23fl%29%22/%3E%20%3Crect%20x=%22224%22%20y=%2211.4%22%20width=%22170%22%20height=%221.2%22%20fill=%22url%28%23fr%29%22/%3E%20%3Cg%20transform=%22translate%28200,12%29%20scale%280.62%29%20translate%28-12,-12%29%22%3E%20%3Cpath%20d=%22M12%200%20C%2012.9%207.4,%2016.6%2011.1,%2024%2012%20C%2016.6%2012.9,%2012.9%2016.6,%2012%2024%20C%2011.1%2016.6,%207.4%2012.9,%200%2012%20C%207.4%2011.1,%2011.1%207.4,%2012%200%20Z%22%20fill=%22%23C9B49E%22/%3E%20%3C/g%3E%3C/svg%3E") !important; } /* ---------- One Free Day, phone refinement ---------- * The saved markup already works at every width on its own: the gutter holding * the times is a clamp(), so it narrows by itself. This rule is the nicer phone * version, where the time sits above the place name and the hairline moves to * the outside. Delete the plugin and you lose this and nothing else — the day * still reads correctly, the rule still runs down the side, no row breaks. */ @media (max-width:479px){ .ev-fd__s{ grid-template-columns:1fr !important; border-left:1px solid var(--ev-rule,#EBDFD3) !important; padding-left:20px !important; } .ev-fd__t{ text-align:left !important; margin:0 0 3px !important; } .ev-fd__b{ border-left:0 !important; padding-left:0 !important; } .ev-fd__d{ left:-25px !important; } } /* At a Glance used to be overridden here with !important, back when it was a * multi-column layout. It is a grid now, and its hairline, column width and gap * all come from Appearance > Ever Widgets — so those rules did nothing except * quietly pin the gap to 30px and ignore the setting. Removed on purpose. */ /* Visited — the same reason as Stay in Touch. Eight values here were sized * against the block's own width, so every one of them was recalculated on every * frame of a window drag. Fixed sizes with one breakpoint: the same at both * ends, nothing recalculated in between. */ @media (max-width:600px){ .ev-visited{ gap:11px !important } .ev-visited__av{ width:38px !important; height:38px !important; margin-right:3px !important } .ev-visited__l1{ font-size:13px !important } .ev-visited__l2{ font-size:11px !important } .ev-visited__stamp{ padding:7px 12px !important } .ev-visited__stamp b{ font-size:15px !important } .ev-visited__stamp span:last-child{ font-size:7.5px !important; letter-spacing:.17em !important } } /* ======================================================================== * * POSTE RESTANTE — the closed postcard that opens. * * Read this as an ADDITION to what the block already carries in its own style * attribute, never as a correction of it. Everything the postcard needs to be * readable is inline: this file only turns it into a layer over the screen and * gives it the movement. Delete the plugin and the postcard is still there in * the article, still readable, still posting to Mailchimp — it simply stops * being a thing that opens. * * No vw, no clamp, no container queries. The card is a fixed 660px and is * scaled by whole steps at a few breakpoints, so there is nothing here for the * browser to recalculate while a window is being dragged. * ======================================================================== */ /* "Tap" on a touch screen, "Click" where there is a mouse. The block hides Click in its own markup, so a saved copy with no stylesheet reads "Tap to open it" rather than "TapClick to open it" — which is why the swap below needs the !important. */ @media (hover:hover) and (pointer:fine){ .ev-pc__tap{ display:none } .ev-pc__click{ display:inline !important } } /* ---------- theme armour ---------- Themes style everything inside an article: every picture gets a border and rounded corners, every button gets uppercased and given a drop shadow, every label goes bold. None of that belongs on a postcard. THE DOUBLED CLASS IS NOT A TYPO — same trick as the armour at the top of this file. A theme rule like `.entry-content button{text-transform:uppercase !important}` is (0,1,1); a plain `.ev-pc button` is (0,1,1) too, so it comes down to which stylesheet the browser read last, which is not a thing to leave to chance. Repeating the class makes it (0,2,1) and settles it. Measured against a deliberately hostile theme, not assumed. */ .ev-pc.ev-pc label{ font-weight:400; margin:0; text-transform:none; letter-spacing:normal; font-size:inherit; line-height:inherit; display:block } .ev-pc.ev-pc p{ font-weight:400; font-style:normal; text-transform:none; letter-spacing:normal } .ev-pc.ev-pc .ev-pc__photo{ border:0 !important; border-radius:0 !important; box-shadow:none !important; max-width:none !important; padding:0 !important; margin:0 !important; filter:none !important } .ev-pc.ev-pc button{ text-transform:none !important; box-shadow:none !important; letter-spacing:normal !important; min-width:0 !important; min-height:0 !important; text-decoration:none !important; border-radius:5px !important; font-weight:500 !important; display:flex !important; align-items:center !important; justify-content:center !important; line-height:1.2 !important; /* the block's own padding, borrowed rather than copied, so there is no second number here to go stale */ padding:var(--ev-bp,11px 18px) !important } .ev-pc.ev-pc button::before, .ev-pc.ev-pc button::after{ content:none !important; display:none !important } .ev-pc.ev-pc input{ box-shadow:none !important; text-transform:none !important; min-height:0 !important; height:auto !important; max-width:none !important; letter-spacing:normal !important } /* ---------- the closed card, in the article ---------- */ /* WITHOUT THE SCRIPT the card breathes on a loop, because CSS has no way of knowing when it has been scrolled to — Safari does not support that yet. WITH the script it holds still until it arrives on the screen and then breathes three times, which is the version of this she actually asked for. */ .ev-pc__card{ transform-origin:50% 100%; animation:ev-pc-breath 6s ease-in-out infinite } .ev-pc--js .ev-pc__card{ animation:none } .ev-pc--js.ev-pc--near .ev-pc__card{ animation:ev-pc-breath 6s ease-in-out 3 } @keyframes ev-pc-breath{ 0%,86%,100%{ transform:translateY(0) rotate(0deg) } 91% { transform:translateY(-6px) rotate(-.7deg) } 96% { transform:translateY(0) rotate(.2deg) } } .ev-pc__card:active{ transform:scale(.985) } /* The checkbox is a 1px dot at zero opacity rather than display:none, so it can still be reached by keyboard. This is what shows that it has been. */ .ev-pc__toggle:focus-visible + .ev-pc__card{ outline:2px solid #9C7B48; outline-offset:3px } /* ---------- the layer ---------- */ .ev-pc__over{ /* Higher than any header. Hers is a sticky bar that sat brightly on top of the dark while everything else behind it was dimmed, which read as a mistake — because it was one. 9999 is a number themes also like. */ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease, visibility 0s linear .28s; overscroll-behavior:contain; } .ev-pc__toggle:checked ~ .ev-pc__over, .ev-pc__over.ev-pc--open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .28s ease; } .ev-pc__over:focus{ outline:0 } .ev-pc__scrim{ position:absolute; inset:0; margin:0; padding:0; background:#453A34; opacity:.62; cursor:pointer } /* The words inside an empty field cannot be coloured from a style attribute — that needs a pseudo-element — so the one rule lives here. Kept dark enough to read: much paler and it fails the contrast people with weaker sight need. */ .ev-pc__field::placeholder{ color:#7F7159; opacity:1 } /* The stage fills the whole layer, so without this it sits on top of the dark backdrop and eats every tap meant for it — tapping outside the card did nothing at all. Only the card itself should catch a tap; everywhere else falls through and closes. */ .ev-pc__stage{ position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; pointer-events:none } /* WHILE A PHONE KEYBOARD IS UP. The script makes the layer the size of the part of the window that can still be seen and adds this class; the card then goes to the top of what is left rather than centring in it, so the half you write on is clear of the keyboard. The padding is set by the script, not here, because a card lying on its side sticks out above its own layout box by half the difference between its two sides and only the script knows the numbers. Nothing is scaled and nothing changes shape. */ .ev-pc--kb .ev-pc__stage{ align-items:flex-start } .ev-pc__fit, .ev-pc__inner{ pointer-events:auto } /* Two elements, not one: fit carries the scale that makes the card fit a small screen, inner carries the rotation that is animated. Put both on one element and the keyframes wipe out the fit. */ .ev-pc__fit{ transform:scale(1); transform-origin:50% 50% } .ev-pc__inner{ width:660px; transform-origin:50% 50% } .ev-pc__x{ position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; margin:0; padding:0; border-radius:50%; background:#F7F1EA; cursor:pointer; display:block } .ev-pc__x span{ position:absolute; top:18px; left:10px; width:18px; height:1.4px; background:#453A34; display:block } .ev-pc__x span:first-child{ transform:rotate(45deg) } .ev-pc__x span:last-child { transform:rotate(-45deg) } /* ---------- which way up, and how big ---------- TWO CASES, AND ONLY TWO. A phone held upright is the one screen the card cannot fit on the right way round, so there — and only there — it lies across the screen and the reader turns the phone. Turn it and the orientation query rights it by itself, so it is landscape either way, whatever their rotation lock says. Everything else — laptop, tablet, phone held sideways, and a browser window dragged tall and narrow — gets the card the right way up. A tall window on a laptop is not a phone: nobody turns a monitor, so rotating the card there would be absurd. That is what (hover:none) is doing in the query. The size is a LADDER OF FIXED STEPS, never a calculation. Each step down matches everything the step above it matches and more, so the smallest one that fits is the one that wins — which is what a min() would do, without asking the browser to work anything out while a window is being dragged. */ /* --- the right way up: 660 x 363 at step 1 --- */ .ev-pc__inner{ transform:rotate(0deg) } .ev-pc__fit{ transform:scale(1) } @media (min-width:900px) and (min-height:470px){ .ev-pc__fit{ transform:scale(1.12) } } @media (max-width:719px), (max-height:419px){ .ev-pc__fit{ transform:scale(.84) } } @media (max-width:599px), (max-height:339px){ .ev-pc__fit{ transform:scale(.70) } } @media (max-width:499px), (max-height:289px){ .ev-pc__fit{ transform:scale(.58) } } @media (max-width:409px), (max-height:249px){ .ev-pc__fit{ transform:scale(.48) } } .ev-pc__toggle:checked ~ .ev-pc__over .ev-pc__inner, .ev-pc__over.ev-pc--open .ev-pc__inner{ animation:ev-pc-arrive-l .95s cubic-bezier(.16,.9,.24,1) both } /* --- a phone held upright: the card lies across the screen --- Turned on its side the card's 660 runs down the screen and its 363 runs across it, so both measurements have to be asked about. Written out in full because a media query list cannot share a condition. */ /* WHICH WAY IT TURNS MATTERS, and it took a keyboard to show why. Turned +90 the card's right-hand half — the address lines, the line they write on, the button — ends up at the BOTTOM of the screen, which is exactly where an iPhone puts its keyboard. Turned -90 the same half lands at the TOP, and what goes under the keyboard is the message, which nobody is reading while they are typing. Same card, same design, same amount of turning the phone. */ @media (hover:none) and (orientation:portrait) and (max-width:719px){ .ev-pc__inner{ transform:rotate(-90deg) } .ev-pc__fit{ transform:scale(1) } .ev-pc__toggle:checked ~ .ev-pc__over .ev-pc__inner, .ev-pc__over.ev-pc--open .ev-pc__inner{ animation:ev-pc-arrive-p .95s cubic-bezier(.16,.9,.24,1) both } } @media (hover:none) and (orientation:portrait) and (max-width:386px), (hover:none) and (orientation:portrait) and (max-height:683px){ .ev-pc__fit{ transform:scale(.92) } } @media (hover:none) and (orientation:portrait) and (max-width:357px), (hover:none) and (orientation:portrait) and (max-height:630px){ .ev-pc__fit{ transform:scale(.84) } } @media (hover:none) and (orientation:portrait) and (max-width:328px), (hover:none) and (orientation:portrait) and (max-height:577px){ .ev-pc__fit{ transform:scale(.76) } } @media (hover:none) and (orientation:portrait) and (max-width:299px), (hover:none) and (orientation:portrait) and (max-height:525px){ .ev-pc__fit{ transform:scale(.68) } } /* THE BIG SPIN, KEPT — and this is the one that has to be right. 540 degrees, the same as the laptop's, landing at -90 instead of +90. The easing is front-loaded, so nine tenths of the turn is done in the first three hundred milliseconds and the last 54 degrees take the rest: from -144, which is plainly a card still tumbling, into -90, which is where it stops. That is the same shape of arrival as the laptop one, which settles the last 54 degrees into upright. It is worth writing down what went wrong before. Landing at +90 from -450, that final slow 54 degrees ran from +36 — and a card sitting at 36 degrees for most of a second looks like a card that arrived the wrong way up and is now correcting itself. Nothing was broken; it just read as broken. */ @keyframes ev-pc-arrive-p{ from{ transform:rotate(-630deg) scale(.04); opacity:0 } 60% { opacity:1 } to { transform:rotate(-90deg) scale(1); opacity:1 } } @keyframes ev-pc-arrive-l{ from{ transform:rotate(-540deg) scale(.04); opacity:0 } 60% { opacity:1 } to { transform:rotate(0deg) scale(1); opacity:1 } } /* Hold the article still underneath, on touch screens only — there the scrollbar is drawn over the page, so nothing shifts when it goes. On a laptop taking the scrollbar away would move the whole page sideways by its width, which is worse than the article scrolling behind a dark screen. */ @media (hover:none){ html:has(.ev-pc__toggle:checked){ overflow:hidden } } /* Anyone who has asked their phone to stop animating things gets none of it: the card sits still and the postcard simply appears. Ignoring this setting is the thing that makes a design feel like spam. */ @media (prefers-reduced-motion:reduce){ .ev-pc__card, .ev-pc--js.ev-pc--near .ev-pc__card{ animation:none !important } .ev-pc__toggle:checked ~ .ev-pc__over .ev-pc__inner, .ev-pc__over.ev-pc--open .ev-pc__inner{ animation:none !important } } /* While you are writing it, in the editor only: the layer is unpinned so the postcard sits in the page and the words can be read as they are typed. The class that turns this on is added by the editor and never appears in an article. */ .ev-pc--peek .ev-pc__over{ position:static; opacity:1; visibility:visible; pointer-events:auto; display:block; transition:none } .ev-pc--peek .ev-pc__scrim, .ev-pc--peek .ev-pc__x{ display:none } .ev-pc--peek .ev-pc__stage{ display:block; width:auto; height:auto } .ev-pc--peek .ev-pc__fit{ transform:none } .ev-pc--peek .ev-pc__inner{ max-width:100%; margin:16px auto 0; transform:none !important; animation:none !important } .ev-pc--peek .ev-pc__card{ animation:none } /* ======================================================================== * * THE TICKET — the eSIM note as a boarding pass. * * The design is not mine; the block carries all of it in its own style * attribute. What is here is only what a style attribute cannot say: the * movement in the signal bars, the narrow-screen sizes, and the armour that * stops a theme redecorating it. * ======================================================================== */ .ev-tkt{ transition:transform .3s ease } .ev-tkt:hover{ transform:translateY(-3px) } .ev-tkt__go:hover, .ev-tkt__go:focus-visible{ border-bottom-color:#453A34 } .ev-tkt__bars i{ animation:ev-tkt-rise 1.8s ease-in-out infinite; transform-origin:bottom } .ev-tkt__bars i:nth-child(2){ animation-delay:.18s } .ev-tkt__bars i:nth-child(3){ animation-delay:.36s } .ev-tkt__bars i:nth-child(4){ animation-delay:.54s } @keyframes ev-tkt-rise{ 0%,70%,100%{ opacity:.35; transform:scaleY(.86) } 22%,52% { opacity:1; transform:scaleY(1) } } @media (prefers-reduced-motion:reduce){ .ev-tkt__bars i{ animation:none !important; opacity:.9 } .ev-tkt{ transition:none } .ev-tkt:hover{ transform:none } } /* A phone: a narrower stub, the short sentence instead of the long one, and smaller bars. The block hides the short sentence in its own markup, so a saved copy with no stylesheet shows one sentence rather than both — which is why the swap below has to shout. Fixed sizes at one breakpoint, not a container query: the query the design arrived with is on the banned list. */ @media (max-width:600px){ .ev-tkt.ev-tkt .ev-tkt__stub{ flex-basis:88px !important; width:88px !important; padding:14px 8px !important; gap:8px !important } .ev-tkt.ev-tkt .ev-tkt__main{ padding:18px !important } .ev-tkt.ev-tkt .ev-tkt__body{ font-size:14px !important } .ev-tkt.ev-tkt .ev-tkt__body--long{ display:none !important } .ev-tkt.ev-tkt .ev-tkt__body--short{ display:block !important } .ev-tkt.ev-tkt .ev-tkt__bars{ height:20px !important } .ev-tkt.ev-tkt .ev-tkt__bars i{ width:4.5px !important } .ev-tkt.ev-tkt .ev-tkt__bars i:nth-child(1){ height:6px !important } .ev-tkt.ev-tkt .ev-tkt__bars i:nth-child(2){ height:11px !important } .ev-tkt.ev-tkt .ev-tkt__bars i:nth-child(3){ height:15px !important } .ev-tkt.ev-tkt .ev-tkt__bars i:nth-child(4){ height:20px !important } .ev-tkt.ev-tkt .ev-tkt__cap{ font-size:10.5px !important; letter-spacing:.08em !important } .ev-tkt.ev-tkt .ev-tkt__state{ font-size:10.5px !important } } /* Theme armour — the doubled class is the same trick as everywhere else here. */ .ev-tkt.ev-tkt p{ margin:0; padding:0; font-weight:400; text-transform:none } .ev-tkt.ev-tkt a{ box-shadow:none !important; text-decoration:none !important } /* ======================================================================== * * WHERE I STAYED * ======================================================================== */ .ev-stay__link:hover, .ev-stay__link:focus-visible{ border-bottom-color:#453A34 } /* A phone: the picture takes the whole column and the words go under it. */ @media (max-width:600px){ .ev-stay.ev-stay .ev-stay__inner{ display:block !important } .ev-stay.ev-stay .ev-stay__media{ width:100% !important; margin-bottom:14px !important } } .ev-stay.ev-stay p{ margin:0; padding:0; text-transform:none } .ev-stay.ev-stay .ev-stay__img{ border:0 !important; border-radius:0 !important; box-shadow:none !important; max-width:none !important; padding:0 !important; margin:0 !important; filter:none !important } .ev-stay.ev-stay a{ box-shadow:none !important; text-decoration:none !important } /* ======================================================================== * * TAKE IT WITH YOU * * The inline styles carry the LAPTOP, because inline is what survives this * plugin being deleted. Everything below is a refinement: the little jump, the * theme armour, and the phone. * ======================================================================== */ /* Theme armour. The doubled class is the same trick as everywhere else here: .ev-gd.ev-gd button is (0,2,1), which beats a theme's .entry-content button even when the theme shouts. */ /* Each line carries its own size, weight, leading and margin as named values, so this can hand them all back to a theme that shouts over them without a second copy of a single number living here. A theme that sets every paragraph in the content to 17px uppercase bold — they exist — otherwise makes the heading smaller than the sentence under it. */ .ev-gd.ev-gd p{ margin:var(--ev-gpm,0) !important; padding:0 !important; font-size:var(--ev-gfs,14px) !important; font-weight:var(--ev-gfw,400) !important; line-height:var(--ev-glh,1.58) !important; text-transform:none !important; letter-spacing:normal !important; text-align:left !important; text-indent:0 !important } .ev-gd.ev-gd img{ border:0 !important; border-radius:0 !important; box-shadow:none !important; max-width:100% !important; padding:0 !important; margin:0 !important; filter:none !important; height:auto !important } .ev-gd.ev-gd button{ padding:var(--ev-gb,9px 15px) !important; text-transform:none !important; letter-spacing:normal !important; box-shadow:none !important; min-height:0 !important; width:auto !important; border:0 !important; border-radius:var(--ev-gbr,4px) !important; line-height:1.2 !important } /* The line they write on is ONE line, at the bottom, in her bronze. A theme that puts a red box round every input beats an inline style; this says it back, and takes the colour from the block rather than keeping its own copy of a setting it cannot know. */ .ev-gd.ev-gd input[type="email"]{ box-shadow:none !important; min-height:0 !important; height:auto !important; border-radius:0 !important; border:0 !important; border-bottom:1px solid var(--ev-gr,#9C7B48) !important; padding:var(--ev-gp,0 0 5px) !important; background:transparent !important; width:auto !important } .ev-gd.ev-gd form{ padding:0 !important; border:0 !important; background:transparent !important; margin:var(--ev-gfm,14px 0 0) !important } /* The words inside an empty field cannot be coloured from a style attribute — that needs a pseudo-element — so the one rule lives here. Dark enough to read: much paler and it fails the contrast weaker sight needs. */ .ev-gd__field::placeholder{ color:#7F7159; opacity:1 } /* THE COVER THE PLUGIN DRAWS, when the server cannot open a PDF at all. Only the top band of it is drawn, because only the top band is ever visible — the rest of the sheet is behind the box. Sizes are named inline and handed back here, so a theme that sets every span in the content in its own type and spacing cannot turn the cover into a caption. */ /* EVERY SPAN IN HERE, not only the two with names on them. The cover is spans inside spans — the site line holds one for the address and one for the line beside it — and a theme that styles every span in the content area redrew the pair of them at 19px with a 3.0 line height: the words came out enormous, the drawn page grew from 61px to 279, and what showed above the box was two giant lower-case words. It was only found by a theme that shouts at spans as well as at paragraphs, which is why the test now does. inherit rather than a number, so the values still come from the block's own inline styles and this file keeps no second copy of a setting. The two named lines below say their own sizes, and are written to be exactly as specific as this rule and to come after it, so they win. */ .ev-gd.ev-gd .ev-gd__drawn, .ev-gd.ev-gd .ev-gd__drawn span{ margin:0 !important; padding:0 !important; font-size:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; text-transform:inherit !important; color:inherit !important; font-weight:inherit !important; text-align:left !important; text-indent:0 !important; border:0 !important; box-shadow:none !important } /* The pile and the two sheets are spans as well, and although nothing is written on them they are what the cover inherits FROM: a theme that sets every span to 19px was handing 19px down into the drawn page. inherit rather than a number, because the pile's own parent is a div and a theme's span rule cannot reach it — so this takes the article's size, which is the right one. */ .ev-gd.ev-gd .ev-gd__pile, .ev-gd.ev-gd .ev-gd__pg{ font-size:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; text-transform:inherit !important; font-weight:inherit !important } .ev-gd.ev-gd .ev-gd__drawn{ padding:var(--ev-gdp,12px 13px 0) !important; font-size:var(--ev-gds,6.5px) !important; line-height:1.2 !important; letter-spacing:normal !important; text-transform:none !important; font-weight:500 !important } .ev-gd.ev-gd .ev-gd__drawn span.ev-gd__site{ font-size:var(--ev-gds,6.5px) !important; letter-spacing:var(--ev-gdt,.14em) !important; font-weight:500 !important; text-transform:uppercase !important; line-height:1.2 !important } .ev-gd.ev-gd .ev-gd__drawn span.ev-gd__name{ font-size:var(--ev-gns,15px) !important; line-height:1.2 !important; font-weight:500 !important; text-transform:none !important; letter-spacing:normal !important; max-height:var(--ev-gnh,18px) !important; overflow:hidden !important; margin:11px 0 0 !important } /* The same little jump the postcard does, so the two blocks move alike. Only transform is animated, which the graphics card does on its own thread. */ .ev-gd__pg{ animation:ev-gd-peek 6s ease-in-out infinite } @keyframes ev-gd-peek{ 0%,84%,100%{ transform:translateY(0) rotate(var(--ev-r,0deg)) } 90% { transform:translateY(-9px) rotate(var(--ev-r,0deg)) } 96% { transform:translateY(-2px) rotate(var(--ev-r,0deg)) } } @media (prefers-reduced-motion:reduce){ .ev-gd__pg{ animation:none } } /* A phone. The pages get smaller and stay where they are — measured from the right-hand edge, so they cannot run off the side of a narrow screen. The back one is 72 tall to show 22: the strip of it the front page does not cover has to reach under the box even at the top of the jump. */ @media (max-width:600px){ .ev-gd.ev-gd .ev-gd__bx{ padding:20px 20px 22px !important } .ev-gd.ev-gd .ev-gd__h{ --ev-gfs:21px !important } .ev-gd.ev-gd .ev-gd__l{ --ev-gfs:13.5px !important } /* --ev-r NEEDS THE !important. It is set in the style attribute, and an inline custom property beats a stylesheet exactly like any other inline declaration — without this the phone kept the laptop's tilt, which moved both pages sideways and upwards and quietly changed the layout she approved. Nothing about it looked broken, which is why it needs a check rather than an eye. */ .ev-gd.ev-gd .ev-gd__pg--f{ width:168px !important; height:66px !important; margin:0 20px -34px auto !important; --ev-r:0deg !important } .ev-gd.ev-gd .ev-gd__pg--b{ width:150px !important; height:72px !important; margin:0 68px -50px auto !important; --ev-r:-6deg !important } /* The drawn cover comes down with the sheet it is on: the window is 168 by 66 here rather than 250 by 96, so laptop type would spill out of the bottom of it instead of stopping where the box begins. */ /* Only 32px of the sheet shows here rather than 62, so everything is pulled up to leave the first line of the title whole inside it. */ .ev-gd.ev-gd .ev-gd__drawn{ --ev-gdp:7px 9px 0 !important } .ev-gd.ev-gd .ev-gd__site{ --ev-gds:5px !important; --ev-gdt:.12em !important } .ev-gd.ev-gd .ev-gd__drawn span.ev-gd__name{ --ev-gns:11.5px !important; --ev-gnh:14px !important; margin:4px 0 0 !important } } /* ======================================================================== * * WHAT IT COST * ======================================================================== */ .ev-ct__row{ display:flex; align-items:flex-end; gap:8px } .ev-ct__n{ flex:0 1 auto } .ev-ct__d{ flex:1 1 14px; min-width:14px; height:0; margin:0 1px 6px } .ev-ct__p{ flex:0 0 auto; white-space:nowrap } /* Theme armour. Every size is named in the block's own style attribute as --ev-cs, so this can hand it straight back to a theme that shouts over it without a second copy of a single number living here. */ .ev-ct.ev-ct p{ margin:var(--ev-cm,0) !important; padding:0 !important; text-transform:none !important; letter-spacing:normal !important; font-weight:400 !important; font-size:var(--ev-cs,16px) !important; text-indent:0 !important } .ev-ct.ev-ct span{ font-size:var(--ev-cs,16px) !important; letter-spacing:normal !important; text-transform:none !important } .ev-ct.ev-ct .ev-ct__t{ font-weight:500 !important; font-variant:small-caps } .ev-ct.ev-ct .ev-ct__f{ font-style:italic !important } .ev-ct.ev-ct a{ box-shadow:none !important; text-decoration:none !important } /* A phone. A 44px figure and a sentence cannot share a line at 390px without one of them wrapping into a mess, so the total stops pretending to be one line: the words centre, the leader dots go, and the figure drops underneath. text-align is set in the row's own style attribute, so this has to shout. */ @media (max-width:600px){ .ev-ct.ev-ct .ev-ct__in{ padding:22px 18px 24px !important } .ev-ct.ev-ct .ev-ct__t{ --ev-cs:26px } .ev-ct.ev-ct .ev-ct__s{ --ev-cs:13px } .ev-ct.ev-ct .ev-ct__row{ --ev-cs:15px } .ev-ct.ev-ct .ev-ct__pr{ --ev-cs:17px } /* a word is not a price and must not be sized like one */ .ev-ct.ev-ct .ev-ct__w{ --ev-cs:11px; letter-spacing:.14em } .ev-ct.ev-ct .ev-ct__note{ --ev-cs:12.5px } .ev-ct.ev-ct .ev-ct__f{ --ev-cs:13px } .ev-ct.ev-ct .ev-ct__tl{ --ev-cs:19px } .ev-ct.ev-ct .ev-ct__tp{ --ev-cs:34px } .ev-ct.ev-ct .ev-ct__trow{ display:block !important; text-align:center !important } .ev-ct.ev-ct .ev-ct__trow .ev-ct__d{ display:none !important } .ev-ct.ev-ct .ev-ct__trow .ev-ct__tp{ display:block; margin-top:4px } } /* ======================================================================== * * ASK EVER * * No script anywhere. The toggles are 1px dots at zero opacity rather than * display:none, so they can still be reached and worked by keyboard. * ======================================================================== */ .ev-ask__t,.ev-ask__off{ position:absolute; width:1px; height:1px; opacity:0; margin:0; padding:0; pointer-events:none } .ev-ask__qw{ position:relative } .ev-ask__q{ position:relative; display:block; text-align:center; cursor:pointer; margin:0 } /* the plus sits out at the edge so the question is centred rather than centred in what is left over */ .ev-ask__mark{ position:absolute; right:15px; top:50%; transform:translateY(-50%); transition:transform .6s cubic-bezier(.34,1.56,.64,1) } .ev-ask__t:checked ~ .ev-ask__qw .ev-ask__mark{ transform:translateY(-50%) rotate(45deg) } .ev-ask__t:focus-visible ~ .ev-ask__qw{ outline:2px solid #9C7B48; outline-offset:2px; border-radius:3px } /* CLICKING THE OPEN ONE AGAIN SHUTS IT. A radio cannot be un-ticked by clicking it, so each question carries a second label lying exactly over the first, pointing at a spare radio belonging to no question. Over the QUESTION only — over the whole item it would swallow every click in the answer. */ .ev-ask__shut{ position:absolute; inset:0; display:none; margin:0; cursor:pointer } .ev-ask__t:checked ~ .ev-ask__qw .ev-ask__shut{ display:block } /* A HEIGHT THAT IS ACTUALLY THE ANSWER'S HEIGHT: 0fr to 1fr, not 0 to a guessed 800px. With a guess, a two-line answer is over in a fifth of the time and a long one is still moving after the easing has finished. */ .ev-ask__a{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .52s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, margin .42s ease } .ev-ask__t:checked ~ .ev-ask__a{ grid-template-rows:1fr; opacity:1 } .ev-ask__in{ overflow:hidden; min-height:0 } @media (prefers-reduced-motion:reduce){ .ev-ask__a,.ev-ask__mark{ transition:none } } .ev-ask.ev-ask label{ font-size:var(--ev-as,15px) !important; font-weight:500 !important; text-transform:none !important; letter-spacing:normal !important } .ev-ask.ev-ask span{ font-size:var(--ev-as,15px) !important; text-transform:none !important; letter-spacing:normal !important } .ev-ask.ev-ask div{ font-size:var(--ev-as,14.5px) !important; letter-spacing:normal !important; text-transform:none !important } .ev-ask.ev-ask a{ box-shadow:none } @media (max-width:600px){ .ev-ask.ev-ask .ev-ask__q{ --ev-as:14.5px; padding:18px 40px } .ev-ask.ev-ask .ev-ask__mark{ right:12px } } /* ======================================================================== * * GETTING THERE * * No script, and no title: she writes her own headings. * ======================================================================== */ .ev-gt__x{ position:absolute; width:1px; height:1px; opacity:0; margin:0; padding:0; pointer-events:none } /* THE ROW OF PLACES, AND THE ONE THING ABOUT IT THAT WAS BROKEN. Centred is right: two or three destinations should sit in the middle of the column. But a centred flex row that is WIDER than its box overflows off BOTH ends, and the half that goes off the left cannot be scrolled back to — the scroll only ever starts at zero, and zero is already past it. On a phone with five destinations that meant the chosen one, the dark one, was permanently cut in half against the left edge with its name unreadable and no way to reach it. 'safe center' is the fix and it is exactly what it was invented for: centre while everything fits, fall back to the start the moment it does not. It is written as a second declaration so a browser that has never heard of it simply ignores the line and behaves as it does today. */ .ev-gt__tabs{ display:flex; align-items:center; justify-content:center; gap:8px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px } .ev-gt__tabs{ justify-content:safe center } .ev-gt__tabs::-webkit-scrollbar{ display:none } .ev-gt__tab{ flex:0 0 auto; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease } .ev-gt__p{ display:none } .ev-gt__cw{ position:relative } .ev-gt__cell{ cursor:pointer; display:block } .ev-gt__shut{ position:absolute; inset:0; display:none; margin:0; cursor:pointer } .ev-gt__hint{ transition:opacity .25s ease } .ev-gt__det{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .52s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, margin .42s ease } .ev-gt__in{ overflow:hidden; min-height:0 } .ev-gt__x:focus-visible ~ .ev-gt__tabs .ev-gt__tab{ outline:2px solid #9C7B48; outline-offset:2px } @media (prefers-reduced-motion:reduce){ .ev-gt__det{ transition:none } } .ev-gt.ev-gt span{ font-size:var(--ev-ts,13px) !important; letter-spacing:var(--ev-tls,normal) !important; text-transform:none !important } .ev-gt.ev-gt span[style*="--ev-tls"]{ text-transform:uppercase !important } .ev-gt.ev-gt label{ text-transform:none !important; letter-spacing:normal !important; font-size:12px !important; font-weight:500 !important } .ev-gt.ev-gt div{ font-size:13px !important; letter-spacing:normal !important; text-transform:none !important } .ev-gt.ev-gt a{ box-shadow:none !important; text-decoration:none !important } .ev-gt.ev-gt svg{ display:block } @media (max-width:600px){ .ev-gt.ev-gt .ev-gt__time{ --ev-ts:19px } .ev-gt.ev-gt .ev-gt__cell{ padding:10px 6px 4px } } /* The positions, written out. The stylesheet ships with this plugin and cannot know the ids of a block written next year, so it counts the radios instead: seven per destination, in a fixed order. Six destinations by five ways of getting about. It is the same rule repeated, so it compresses to almost nothing over the wire. */ .ev-gt__x:nth-of-type(1):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1),.ev-gt__x:nth-of-type(2):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1),.ev-gt__x:nth-of-type(3):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1),.ev-gt__x:nth-of-type(4):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1),.ev-gt__x:nth-of-type(5):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1),.ev-gt__x:nth-of-type(6):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1),.ev-gt__x:nth-of-type(7):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1){ display:block } .ev-gt__x:nth-of-type(1):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(1),.ev-gt__x:nth-of-type(2):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(1),.ev-gt__x:nth-of-type(3):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(1),.ev-gt__x:nth-of-type(4):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(1),.ev-gt__x:nth-of-type(5):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(1),.ev-gt__x:nth-of-type(6):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(1),.ev-gt__x:nth-of-type(7):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(1){ background:#A9937C !important; color:#FFFFFF !important; border-color:#A9937C !important } .ev-gt__x:nth-of-type(3):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__ds > .ev-gt__det:nth-child(1){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(3):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(3):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(4):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__ds > .ev-gt__det:nth-child(2){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(4):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(4):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(5):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__ds > .ev-gt__det:nth-child(3){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(5):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(5):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(6):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__ds > .ev-gt__det:nth-child(4){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(6):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(6):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(7):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__ds > .ev-gt__det:nth-child(5){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(7):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(7):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(1) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(8):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2),.ev-gt__x:nth-of-type(9):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2),.ev-gt__x:nth-of-type(10):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2),.ev-gt__x:nth-of-type(11):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2),.ev-gt__x:nth-of-type(12):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2),.ev-gt__x:nth-of-type(13):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2),.ev-gt__x:nth-of-type(14):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2){ display:block } .ev-gt__x:nth-of-type(8):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(2),.ev-gt__x:nth-of-type(9):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(2),.ev-gt__x:nth-of-type(10):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(2),.ev-gt__x:nth-of-type(11):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(2),.ev-gt__x:nth-of-type(12):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(2),.ev-gt__x:nth-of-type(13):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(2),.ev-gt__x:nth-of-type(14):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(2){ background:#A9937C !important; color:#FFFFFF !important; border-color:#A9937C !important } .ev-gt__x:nth-of-type(10):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__ds > .ev-gt__det:nth-child(1){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(10):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(10):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(11):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__ds > .ev-gt__det:nth-child(2){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(11):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(11):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(12):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__ds > .ev-gt__det:nth-child(3){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(12):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(12):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(13):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__ds > .ev-gt__det:nth-child(4){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(13):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(13):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(14):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__ds > .ev-gt__det:nth-child(5){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(14):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(14):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(2) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(15):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3),.ev-gt__x:nth-of-type(16):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3),.ev-gt__x:nth-of-type(17):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3),.ev-gt__x:nth-of-type(18):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3),.ev-gt__x:nth-of-type(19):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3),.ev-gt__x:nth-of-type(20):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3),.ev-gt__x:nth-of-type(21):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3){ display:block } .ev-gt__x:nth-of-type(15):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(3),.ev-gt__x:nth-of-type(16):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(3),.ev-gt__x:nth-of-type(17):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(3),.ev-gt__x:nth-of-type(18):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(3),.ev-gt__x:nth-of-type(19):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(3),.ev-gt__x:nth-of-type(20):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(3),.ev-gt__x:nth-of-type(21):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(3){ background:#A9937C !important; color:#FFFFFF !important; border-color:#A9937C !important } .ev-gt__x:nth-of-type(17):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__ds > .ev-gt__det:nth-child(1){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(17):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(17):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(18):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__ds > .ev-gt__det:nth-child(2){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(18):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(18):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(19):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__ds > .ev-gt__det:nth-child(3){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(19):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(19):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(20):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__ds > .ev-gt__det:nth-child(4){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(20):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(20):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(21):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__ds > .ev-gt__det:nth-child(5){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(21):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(21):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(3) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(22):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4),.ev-gt__x:nth-of-type(23):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4),.ev-gt__x:nth-of-type(24):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4),.ev-gt__x:nth-of-type(25):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4),.ev-gt__x:nth-of-type(26):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4),.ev-gt__x:nth-of-type(27):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4),.ev-gt__x:nth-of-type(28):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4){ display:block } .ev-gt__x:nth-of-type(22):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(4),.ev-gt__x:nth-of-type(23):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(4),.ev-gt__x:nth-of-type(24):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(4),.ev-gt__x:nth-of-type(25):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(4),.ev-gt__x:nth-of-type(26):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(4),.ev-gt__x:nth-of-type(27):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(4),.ev-gt__x:nth-of-type(28):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(4){ background:#A9937C !important; color:#FFFFFF !important; border-color:#A9937C !important } .ev-gt__x:nth-of-type(24):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__ds > .ev-gt__det:nth-child(1){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(24):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(24):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(25):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__ds > .ev-gt__det:nth-child(2){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(25):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(25):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(26):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__ds > .ev-gt__det:nth-child(3){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(26):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(26):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(27):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__ds > .ev-gt__det:nth-child(4){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(27):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(27):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(28):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__ds > .ev-gt__det:nth-child(5){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(28):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(28):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(4) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(29):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5),.ev-gt__x:nth-of-type(30):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5),.ev-gt__x:nth-of-type(31):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5),.ev-gt__x:nth-of-type(32):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5),.ev-gt__x:nth-of-type(33):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5),.ev-gt__x:nth-of-type(34):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5),.ev-gt__x:nth-of-type(35):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5){ display:block } .ev-gt__x:nth-of-type(29):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(5),.ev-gt__x:nth-of-type(30):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(5),.ev-gt__x:nth-of-type(31):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(5),.ev-gt__x:nth-of-type(32):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(5),.ev-gt__x:nth-of-type(33):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(5),.ev-gt__x:nth-of-type(34):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(5),.ev-gt__x:nth-of-type(35):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(5){ background:#A9937C !important; color:#FFFFFF !important; border-color:#A9937C !important } .ev-gt__x:nth-of-type(31):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__ds > .ev-gt__det:nth-child(1){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(31):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(31):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(32):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__ds > .ev-gt__det:nth-child(2){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(32):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(32):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(33):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__ds > .ev-gt__det:nth-child(3){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(33):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(33):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(34):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__ds > .ev-gt__det:nth-child(4){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(34):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(34):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(35):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__ds > .ev-gt__det:nth-child(5){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(35):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(35):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(5) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(36):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6),.ev-gt__x:nth-of-type(37):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6),.ev-gt__x:nth-of-type(38):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6),.ev-gt__x:nth-of-type(39):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6),.ev-gt__x:nth-of-type(40):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6),.ev-gt__x:nth-of-type(41):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6),.ev-gt__x:nth-of-type(42):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6){ display:block } .ev-gt__x:nth-of-type(36):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(6),.ev-gt__x:nth-of-type(37):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(6),.ev-gt__x:nth-of-type(38):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(6),.ev-gt__x:nth-of-type(39):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(6),.ev-gt__x:nth-of-type(40):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(6),.ev-gt__x:nth-of-type(41):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(6),.ev-gt__x:nth-of-type(42):checked ~ .ev-gt__tabs > .ev-gt__tab:nth-child(6){ background:#A9937C !important; color:#FFFFFF !important; border-color:#A9937C !important } .ev-gt__x:nth-of-type(38):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__ds > .ev-gt__det:nth-child(1){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(38):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(38):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(1) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(39):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__ds > .ev-gt__det:nth-child(2){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(39):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(39):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(2) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(40):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__ds > .ev-gt__det:nth-child(3){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(40):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(40):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(3) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(41):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__ds > .ev-gt__det:nth-child(4){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(41):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(41):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(4) .ev-gt__hint{ opacity:0 } .ev-gt__x:nth-of-type(42):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__ds > .ev-gt__det:nth-child(5){ grid-template-rows:1fr; opacity:1; margin-top:14px } .ev-gt__x:nth-of-type(42):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__shut{ display:block } .ev-gt__x:nth-of-type(42):checked ~ .ev-gt__ps > .ev-gt__p:nth-child(6) .ev-gt__grid > .ev-gt__cw:nth-child(5) .ev-gt__hint{ opacity:0 }