/* ═══════════════════════════════════════════════════════════════════════════ Smiley Orthodontics — Direction G "Γυαλί" Neutral glass system with ONE accent colour, used in exactly three places: the logo circle, the word "Orthodontics", and the bullets on chip lists. Headings, buttons, grounds and the glass itself stay neutral on purpose. Change --accent below and re-run brand/moodboard/recolor.py for the logo. ═══════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:Manrope;src:url("../fonts/manrope-latin.woff2")format("woff2"); font-weight:200 800;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:Manrope;src:url("../fonts/manrope-greek.woff2")format("woff2"); font-weight:200 800;font-display:swap; unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;} :root{ /* Τιρκουάζ, βγαλμένο από τον τοίχο του ιατρείου. Δύο αποχρώσεις γιατί μία δεν φτάνει: το φωτεινό #00B0AE έχει αντίθεση 2.36 πάνω στο ανοιχτό φόντο — κόβεται ως κείμενο. Άρα το φωτεινό μένει για γεμίσματα, τελίτσες, λογότυπο και κείμενο πάνω σε σκούρο· το σκούρο αναλαμβάνει κάθε χρωματιστό κείμενο πάνω σε ανοιχτό (5.08, περνάει AA). */ --accent:#00B0AE; --accent-ink:#00726F; --ink:#141C27; --ink-2:#37424F; --muted:#5A6472; /* 4.5:1 on stone, the darkest surface it sits on */ /* No pure white anywhere. The page ground is warm bone, panels sit a shade lighter, and the alternating band is warm stone — so sections separate by temperature instead of by an invisible grey. */ --page:#F4F0E9; --surface:#FBF9F5; --surface-2:#E5DFD4; --surface-3:#D9D2C4; --line:#DFD8CB; --cta:#141C27; --cta-ink:#FFFFFF; --glass:linear-gradient(150deg,rgba(255,255,255,.64),rgba(255,255,255,.36)); --glass-ring:rgba(255,255,255,.34); --glass-sheen:rgba(255,255,255,.75); --scrim:linear-gradient(135deg,rgba(226,234,244,.40),rgba(23,32,45,.34)); --edge-cool:rgba(150,180,255,.85); --edge-warm:rgba(240,199,176,.85); --shadow-s:0 1px 2px rgba(20,28,39,.05),0 8px 20px -14px rgba(20,28,39,.24); --shadow-m:0 1px 2px rgba(20,28,39,.05),0 24px 50px -28px rgba(20,28,39,.34); --shadow-glass:0 28px 62px -30px rgba(15,22,32,.66); --wrap:1180px; --pad:clamp(18px,4vw,40px); --gap-sec:clamp(56px,9vw,110px); --r:16px; --r-lg:22px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--page);color:var(--ink); font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px;line-height:1.65;font-weight:450; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} :focus-visible{outline:2.5px solid var(--accent-ink);outline-offset:3px;border-radius:4px} h1,h2,h3,h4{margin:0;text-wrap:balance} h1,h2{font-weight:300;letter-spacing:-.035em;line-height:1.03} h1{font-size:clamp(34px,6.2vw,64px)} h2{font-size:clamp(28px,4.4vw,46px)} h3{font-weight:700;letter-spacing:-.02em;font-size:clamp(19px,2.2vw,23px);line-height:1.25} h4{font-weight:700;letter-spacing:-.015em;font-size:17px;line-height:1.3} p{margin:0} strong,b{font-weight:700} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .section{padding-block:var(--gap-sec)} .section{background:var(--page)} .section--tint{background:var(--surface-2)} .section--edge{border-top:1px solid var(--line)} .stack{display:flex;flex-direction:column} .stack>*+*{margin-top:var(--s,18px)} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none} .lead{font-size:clamp(17px,2vw,19px);line-height:1.6;color:var(--ink-2);max-width:60ch} .muted{color:var(--muted)} .measure{max-width:64ch} /* ─── buttons ─── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:800;font-size:15px;letter-spacing:-.01em;padding:15px 26px;border-radius:999px; background:var(--cta);color:var(--cta-ink);border:0;cursor:pointer;white-space:nowrap; transition:transform .16s ease,box-shadow .16s ease,background .16s ease} .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -14px rgba(20,28,39,.7)} .btn:active{transform:none} .btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(20,28,39,.24)} .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(20,28,39,.5)} .btn--light{background:#fff;color:var(--ink)} .btn--sm{padding:11px 19px;font-size:13.5px} .btns{display:flex;flex-wrap:wrap;gap:10px} /* ─── logo lockup ─── */ .lockup{display:inline-flex;align-items:center;gap:10px} /* the badge grew once the ring text came out of it: with ΚΩΝΣΤΑΝΤΙΝΟΣ and ΚΑΡΑΜΕΣΙΝΗΣ gone there is nothing in the mark that needs reading, so it can carry more size without shouting */ .lockup img{width:var(--lb,50px);height:auto;border-radius:50%;flex:none} .lockup .wm{display:flex;flex-direction:column;line-height:1.02} .lockup .wm b{font-weight:800;font-size:var(--lf,20px);letter-spacing:-.035em;white-space:nowrap} .lockup .wm b i{font-style:normal;color:var(--accent-ink)} /* ← accent #2 */ .ftr .lockup .wm b i,.band--slate .lockup .wm b i, .band--ink .lockup .wm b i{color:var(--accent)} .lockup .wm span{font-weight:600;font-size:calc(var(--lf,20px)*.44);color:var(--muted); margin-top:3px;white-space:nowrap} /* ─── header ─── */ .hdr{position:sticky;top:0;z-index:60;background:rgba(251,249,245,.88); -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--line)} .hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px; min-height:70px;padding-block:10px} .nav{display:none} .nav ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0} .nav a{font-size:14px;font-weight:600;color:var(--ink-2);padding-block:6px;white-space:nowrap; border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .nav a:hover{color:var(--ink)} .nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)} .hdr__cta{display:none} .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer} .burger span{display:block;height:2px;background:var(--ink);border-radius:2px; transition:transform .22s ease,opacity .18s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (min-width:1160px){ .nav{display:block} .hdr__cta{display:inline-flex} .burger{display:none} } .drawer{display:none;border-top:1px solid var(--line);background:var(--surface)} /* The breathing room under the last button goes INSIDE the drawer, not on it. The drawer lives inside
, and it is collapsed with max-height, which caps the content box but not the padding: 24px on the drawer itself made the sticky header 90px tall even while shut, and everything pinned under it, the chip rail included, was measured against the old 66. */ .drawer .wrap{padding-bottom:24px} .drawer.open{display:block} .drawer ul{list-style:none;margin:0;padding:8px 0 18px} .drawer a{display:block;padding:13px 0;font-size:17px;font-weight:600;border-bottom:1px solid var(--line)} .drawer .btns{margin-top:18px} @media (min-width:1160px){.drawer,.drawer.open{display:none}} /* ─── glass hero ─── */ .hero{position:relative;display:grid;place-items:center;justify-items:stretch; min-height:clamp(460px,72vh,660px);padding:clamp(28px,6vw,64px) var(--pad); background-size:cover;background-position:26% 34%;overflow:hidden;isolation:isolate} .hero::before{content:"";position:absolute;inset:0;background:var(--scrim);z-index:-1} @media (min-width:820px){.hero{justify-items:end}} .pane{position:relative;width:min(470px,100%);border-radius:var(--r-lg); padding:clamp(24px,3.4vw,36px);background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5); box-shadow:inset 0 1px 0 var(--glass-sheen),inset 0 0 0 1px var(--glass-ring), var(--shadow-glass), -15px 0 38px -30px var(--edge-cool),15px 0 38px -30px var(--edge-warm)} .pane h1,.pane h2{color:var(--ink)} .pane .lead{color:var(--ink-2);font-size:15.5px} .pane .btns{margin-top:24px} /* chip list — accent #3 lives on the bullets */ .chips{display:flex;flex-wrap:wrap;gap:6px 16px;margin:22px 0 0;padding:16px 0 0; list-style:none;border-top:1px solid rgba(20,28,39,.14)} .chips li{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ink-2)} .chips li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--accent);margin-right:7px;vertical-align:2px} .chips--plain{border-top:0;padding-top:0} /* ─── generic layout blocks ─── */ .grid{display:grid;gap:clamp(16px,2.4vw,24px)} .grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .split{display:grid;gap:clamp(26px,4vw,56px);align-items:center} @media (min-width:860px){.split{grid-template-columns:1fr 1fr} .split--wide-l{grid-template-columns:1.15fr .85fr} .split--wide-r{grid-template-columns:.85fr 1.15fr}} .head{max-width:62ch;margin-bottom:clamp(28px,4vw,46px)} .head .eyebrow{margin-bottom:14px} .head h2+.lead{margin-top:16px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:26px 24px 28px;transition:transform .18s ease,box-shadow .18s ease} a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)} .card h3{margin-bottom:9px} .card p{color:var(--ink-2);font-size:15.5px;line-height:1.6} .card__more{display:inline-flex;align-items:center;gap:7px;margin-top:14px; font-size:13.5px;font-weight:700;color:var(--ink)} .card__more::after{content:"→";transition:transform .18s ease} a.card:hover .card__more::after{transform:translateX(3px)} .media{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-m)} .media img{width:100%;aspect-ratio:3/2;object-fit:cover} .media--tall img{aspect-ratio:4/5} .media--square img{aspect-ratio:1} /* two audience doors */ .doors{display:grid;gap:clamp(16px,2.4vw,22px)} @media (min-width:760px){.doors{grid-template-columns:1fr 1fr}} .door{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden; min-height:340px;box-shadow:var(--shadow-m);isolation:isolate} .door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .door::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(20,28,39,.05) 30%,rgba(20,28,39,.78))} .door:hover img{transform:scale(1.035)} .door__in{position:relative;display:flex;flex-direction:column;justify-content:flex-end; height:100%;min-height:340px;padding:28px} .door h3{color:#fff;font-size:clamp(22px,2.8vw,28px)} .door p{color:rgba(255,255,255,.84);font-size:15px;margin-top:8px;max-width:32ch} .door__more{display:inline-flex;align-items:center;gap:8px;margin-top:16px; font-size:13.5px;font-weight:800;color:#fff} .door__more::after{content:"→";transition:transform .18s ease} .door:hover .door__more::after{transform:translateX(3px)} /* numbered process */ .steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:2px} .steps li{counter-increment:step;display:grid;gap:4px 20px;padding:22px 0; border-top:1px solid var(--line);grid-template-columns:1fr} @media (min-width:720px){.steps li{grid-template-columns:44px 250px 1fr;align-items:baseline}} .steps li::before{content:counter(step,decimal-leading-zero);font-size:12px;font-weight:800; letter-spacing:.08em;color:var(--accent);font-variant-numeric:tabular-nums} .steps h4{font-size:17px} .steps p{color:var(--ink-2);font-size:15.5px;line-height:1.6} /* facts strip */ .facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .split .facts{grid-template-columns:repeat(2,1fr)} .facts div{background:var(--surface);padding:22px 20px} .facts dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .facts dd{margin:6px 0 0;font-size:19px;font-weight:700;letter-spacing:-.02em} .facts dd small{display:block;font-size:14px;font-weight:500;color:var(--ink-2);margin-top:3px; letter-spacing:0} /* FAQ */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{display:flex;align-items:flex-start;gap:16px;padding:22px 0;cursor:pointer; font-weight:700;font-size:17px;letter-spacing:-.015em;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease} .faq details[open] summary::after{transform:rotate(-135deg) translate(-4px,-4px)} .faq details p{padding:0 0 24px;color:var(--ink-2);font-size:16px;max-width:72ch} /* prose */ .prose{color:var(--ink-2);max-width:68ch} .prose>*+*{margin-top:18px} .prose h3{color:var(--ink);margin-top:34px} .prose ul{margin:0;padding-left:0;list-style:none} .prose ul li{position:relative;padding-left:22px;margin-top:9px} .prose ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px; border-radius:50%;background:var(--accent)} .prose em{font-style:normal;color:var(--ink);font-weight:700} /* contact */ .contact{display:grid;gap:clamp(24px,4vw,44px)} /* the form is gone: one column of details, held to a readable measure so it does not stretch to the full width of a desktop screen */ @media (min-width:900px){.contact{grid-template-columns:minmax(0,560px)}} .info{list-style:none;margin:0;padding:0} .info li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0; border-bottom:1px solid var(--line);align-items:baseline} .info dt,.info .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--muted)} .info .v{font-size:16px;font-weight:600;letter-spacing:-.01em} .info .v small{display:block;font-weight:500;font-size:14.5px;color:var(--ink-2);margin-top:4px} .map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-height:340px; background:var(--surface-3);position:relative} .map iframe{width:100%;height:100%;min-height:340px;border:0;display:block} form .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} form label{font-size:13px;font-weight:700;letter-spacing:.01em} form input,form select,form textarea{font:inherit;font-size:16px;padding:13px 15px; border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink)} form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--accent); outline-offset:1px;border-color:transparent} form textarea{min-height:120px;resize:vertical} .form-note{font-size:13.5px;color:var(--muted);margin-top:12px} /* footer */ .ftr{background:var(--ink);color:#E7ECF2;padding-block:clamp(48px,7vw,80px) 0} .ftr a{color:#E7ECF2} .ftr a:hover{text-decoration:underline;text-underline-offset:3px} .ftr__top{display:grid;gap:34px} @media (min-width:820px){.ftr__top{grid-template-columns:1.3fr 1fr 1fr}} .ftr .lockup .wm b{color:#fff} .ftr .lockup .wm span{color:#98A5B4} .ftr h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8B99AA;margin-bottom:14px} .ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .ftr ul a{font-size:15px;color:#CBD4DE} .ftr__bottom{margin-top:clamp(36px,5vw,56px);padding-block:22px;border-top:1px solid rgba(255,255,255,.12); display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between; font-size:13.5px;color:#8B99AA} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px; border-radius:0 0 10px 0;z-index:100;font-weight:700} .skip:focus{left:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal,.reveal.in{opacity:1;transform:none;transition:none} .door img,.btn,.card{transition:none} } /* ═══════════════════════════════════════════════════════════════════════════ G + F HYBRID — the glass hero stays; everything below it becomes a sequence of full-colour bands. Two rules fix what was broken: 1. NO WHITE SECTIONS. Every band owns a ground colour and flips its own text tokens, so contrast is guaranteed instead of hoped for. 2. COLOUR CARRIES MEANING. Coral = παιδιά, cobalt = ενήλικες, and those two never appear anywhere they do not mean that. ═══════════════════════════════════════════════════════════════════════════ */ .band{position:relative;background:var(--bg);color:var(--tx)} .band{--bg:#F4F0E9;--tx:#14181B;--tx2:#5C6570;--rule:rgba(20,24,27,.14); --chip:rgba(20,24,27,.05);--btn:#14181B;--btn-tx:#F4F0E9} /* Four grounds, strict light/dark alternation. No white anywhere below the hero, and nothing saturated: the only saturated colour on the whole site stays the coral accent, in the same three small places as before. */ .band--bone {--bg:#F4F0E9;--tx:#14181B;--tx2:#5C6570;--rule:rgba(20,24,27,.14); --chip:rgba(20,24,27,.05);--btn:#14181B;--btn-tx:#F4F0E9} .band--stone {--bg:#E5DFD4;--tx:#14181B;--tx2:#5A6068;--rule:rgba(20,24,27,.16); --chip:rgba(20,24,27,.06);--btn:#14181B;--btn-tx:#F4F0E9} .band--slate {--bg:#1F2C33;--tx:#F2EFEA;--tx2:#9AACB2;--rule:rgba(242,239,234,.22); --chip:rgba(242,239,234,.09);--btn:#F2EFEA;--btn-tx:#1F2C33} .band--ink {--bg:#14181B;--tx:#F2EFEA;--tx2:#8B949B;--rule:rgba(242,239,234,.18); --chip:rgba(242,239,234,.08);--btn:#F2EFEA;--btn-tx:#14181B} .band .eyebrow{color:var(--tx2)} .band .lead,.band p{color:var(--tx2)} .band h2,.band h3,.band h4{color:var(--tx)} .band .btn{background:var(--btn);color:var(--btn-tx)} .band .btn--ghost{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1.6px var(--rule)} .band .chips li{color:var(--tx2)} .band .chips{border-top-color:var(--rule)} /* the giant outlined section number — the main wayfinding device */ .band__n{position:absolute;top:clamp(14px,2.6vw,30px);right:clamp(16px,3vw,44px); font-size:clamp(72px,13vw,180px);font-weight:800;letter-spacing:-.06em;line-height:.78; -webkit-text-stroke:1.5px var(--tx);color:transparent;opacity:.14;pointer-events:none; font-variant-numeric:tabular-nums} /* one statement per band, very large, everything else small */ .band__say{font-size:clamp(34px,6.4vw,78px);font-weight:300;letter-spacing:-.04em;line-height:.98; max-width:16ch} .band__say b{font-weight:700} .band__sub{margin-top:18px;font-size:clamp(15px,1.7vw,18px);line-height:1.55;max-width:44ch; color:var(--tx2)} /* the two audience doors, edge to edge, no white between them */ .split-bands{display:grid;grid-template-columns:1fr} @media (min-width:900px){.split-bands{grid-template-columns:1fr 1fr}} .split-bands>.band{padding:clamp(34px,5vw,72px) clamp(22px,4vw,56px);display:flex; flex-direction:column;justify-content:flex-end;min-height:clamp(440px,58vw,620px);overflow:hidden} .split-bands .shot{border-radius:14px;overflow:hidden;margin-bottom:auto;max-width:min(100%,420px)} .split-bands .shot img{width:100%;aspect-ratio:4/3;object-fit:cover} .split-bands .band__say{font-size:clamp(30px,3.8vw,50px)} /* treatment cards on the dark band get photographs */ .band .hscroll__card{background:var(--chip);border-color:var(--rule);padding:0;overflow:hidden} .band .hscroll__card .shot{aspect-ratio:16/10;overflow:hidden;display:block} .band .hscroll__card .shot img{width:100%;height:100%;object-fit:cover} .band .hscroll__card .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1} .band .hscroll__card h3{color:var(--tx);margin:10px 0 8px} .band .hscroll__card p{color:var(--tx2)} .band .hscroll__card .tagline{color:var(--tx2);opacity:.75} .band .hscroll__card .n{color:var(--accent)} /* The stack only works if each card actually covers the one beneath it. At 5.5% opacity all five cards were transparent, so by the fifth step five headings and five paragraphs were printing through each other and none of them could be read. Opaque now — the same colour the tint used to composite to, so a single card looks unchanged, but a stacked one hides what is under it. The upward shadow is what makes the 16px strip above read as a card behind rather than a stray line. */ .band--slate .stack-card{background:#2A363D} .band--ink .stack-card{background:#1E2427} .band--slate .stack-card,.band--ink .stack-card{ border-color:var(--rule); box-shadow:inset 0 1px 0 rgba(242,239,234,.07),0 -10px 26px -14px rgba(0,0,0,.75)} .band--slate .stack-card h3,.band--ink .stack-card h3{color:var(--tx)} .band--slate .stack-card p,.band--ink .stack-card p{color:var(--tx2)} .band--slate .stack-card__n,.band--ink .stack-card__n{background:rgba(242,239,234,.09); color:var(--accent)} .band--bone .stack-card,.band--stone .stack-card{background:#FBF9F5;border-color:var(--rule)} .band .media,.band .card{border-color:var(--rule)} /* A .card keeps background:var(--surface), which is light, but a dark band sets --tx to a near-white. Inside .band--slate and .band--ink that put near-white type on a near-white card: 1.09:1, completely invisible. The card gets the band's own surface instead, the same one the stacking cards use, so it reads as a card without fighting the type. */ .band--slate .card{background:#2A363D} .band--ink .card{background:#1E2427} .band--slate .card,.band--ink .card{border-color:var(--rule);box-shadow:none} .band--slate .card h3,.band--ink .card h3{color:var(--tx)} .band--slate .card p,.band--ink .card p, .band--slate .card li,.band--ink .card li{color:var(--tx2)} .band--slate .card em,.band--ink .card em{color:var(--tx)} .band--slate a.card:hover,.band--ink a.card:hover{box-shadow:0 14px 30px -20px rgba(0,0,0,.8)} /* full-bleed photo band with copy over it */ .photoband{position:relative;min-height:clamp(420px,62vh,620px);display:grid;align-items:end; background-size:cover;background-position:center 45%;overflow:hidden} .photoband::before{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,28,39,.15) 35%,rgba(20,28,39,.86))} .photoband__in{position:relative;padding:clamp(28px,5vw,64px) 0} .photoband h2,.photoband p{color:#fff} .photoband p{color:rgba(255,255,255,.84)} /* ── the side rail: always tells you where you are ───────────────────────── */ .rail{position:fixed;left:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);z-index:55; display:none} @media (min-width:1240px){.rail{display:block}} .rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} /* the 4px of padding turns a 17px row into a 25px pointer target; the gap drops by the same amount, so the rail looks identical to before */ .rail a{padding-block:4px} .rail a{display:flex;align-items:center;gap:11px;text-decoration:none; font-size:10.5px;font-weight:800;letter-spacing:.14em; color:var(--rail-dim,rgba(20,28,39,.42));transition:color .3s ease} .rail a::before{content:"";width:16px;height:2px;background:currentColor;flex:none; transition:width .3s var(--ease-out,ease)} .rail a.is-here{color:var(--rail-on,#141C27)} .rail a.is-here::before{width:34px} .rail .lbl{opacity:0;transform:translateX(-5px);white-space:nowrap; transition:opacity .3s ease,transform .3s ease} .rail:hover .lbl,.rail a.is-here .lbl{opacity:1;transform:none} .rail.on-dark{--rail-dim:rgba(255,255,255,.5);--rail-on:#fff} /* ═══════════════════════════════════════════════════════════════════════════ REFERENCE PAGES — the fix for "χαοτικό" is not more pages, it is fewer pages with visible structure. One long page, a sticky index that says where you are, and every entry built to the same shape so the reader always knows what they are looking at. ═══════════════════════════════════════════════════════════════════════════ */ .ref{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:start} @media (min-width:1000px){.ref{grid-template-columns:250px minmax(0,1fr)}} .toc{position:sticky;top:96px;align-self:start} .toc h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin-bottom:14px} .toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .toc a{display:block;padding:8px 0 8px 13px;font-size:13.5px;font-weight:600;color:var(--muted); border-left:2px solid var(--line);transition:color .2s,border-color .2s} .toc a:hover{color:var(--ink)} .toc a.is-here{color:var(--ink);border-left-color:var(--accent)} .toc .grp{padding:14px 0 6px 13px;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ink);border-left:2px solid transparent} /* the symptom index: plain language first, clinical names later */ .symptoms{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .symptoms a{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--surface); border:1px solid var(--line);border-radius:12px;font-size:15px;font-weight:600; transition:transform .18s,border-color .18s} .symptoms a:hover{transform:translateY(-2px);border-color:var(--ink)} .symptoms a::after{content:"↓";margin-left:auto;color:var(--accent);font-weight:800} /* every entry has the same anatomy, so nothing feels like a loose fragment */ .entry{padding-block:clamp(26px,3.4vw,40px);border-top:1px solid var(--line)} .entry:first-of-type{border-top:0;padding-top:0} .entry h3{margin-bottom:6px} .entry .also{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:16px} .entry p{color:var(--ink-2);font-size:16px;line-height:1.62;max-width:66ch} .entry p+p{margin-top:12px} .entry .how{margin-top:16px;padding:16px 18px;background:var(--surface-2);border-radius:12px; border-left:3px solid var(--accent)} .entry .how b{display:block;font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:7px} .entry .how p{font-size:15.5px;max-width:64ch} .entry .ages{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} .entry .ages span{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 11px; border-radius:999px;background:var(--surface-2);color:var(--ink-2)} .famhead{padding:clamp(22px,3vw,32px) 0 4px} .famhead .lab{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .famhead .lab::before{content:"";width:22px;height:2px;background:var(--accent)} .famhead h2{margin-top:12px} .famhead p{margin-top:12px;color:var(--ink-2);font-size:16.5px;max-width:62ch} /* ═══════════════════════════════════════════════════════════════════════════ MOBILE Roughly nine in ten visitors arrive on a phone, so this is the real design, not a fallback. Targets follow WCAG 2.2 plus the stricter platform advice: 44x44 minimum for anything tappable, at least 8px between neighbours, and nothing readable under 16px. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1159px){ /* The reference index cannot be a sidebar on a phone: eighteen stacked links would push the content a whole screen down. It becomes a sticky rail of chips under the header instead, which keeps the wayfinding and costs 52px. */ .ref{display:block} /* 66px is what the header actually measures once it has condensed, at every width from 360 to 1039. It used to say 56, so the chip rail ran ten pixels underneath the header and was hidden by it. */ .toc{position:sticky;top:66px;z-index:40;margin:0 calc(var(--pad) * -1) 24px; padding:9px var(--pad);background:var(--surface-2); border-block:1px solid var(--line);overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;scrollbar-width:none} .toc::-webkit-scrollbar{display:none} .toc h4{display:none} .toc ol{flex-direction:row;gap:8px;width:max-content} .toc a{display:flex;align-items:center;min-height:44px;padding:0 16px;white-space:nowrap; font-size:14.5px;border:1px solid var(--line);border-left:1px solid var(--line); border-radius:999px;background:var(--surface);color:var(--ink-2)} .toc a.is-here{background:var(--ink);color:var(--surface);border-color:var(--ink)} .toc .grp{display:flex;align-items:center;padding:0 6px 0 2px;border-left:0; font-size:10.5px;opacity:.65;white-space:nowrap} /* nothing tappable smaller than a fingertip */ .symptoms a{min-height:56px;font-size:16px} .faq summary{min-height:56px;padding-block:18px;font-size:16.5px} .drawer a{min-height:52px;display:flex;align-items:center;font-size:17px} .btn{min-height:48px;font-size:16px} .btn--sm{min-height:44px;font-size:15px} .filters button{min-height:44px;font-size:15px} .card__more{min-height:44px;align-items:center} .prose a,.entry a{padding-block:4px} /* nothing readable under 16px */ body{font-size:16.5px} .card p,.entry p,.prose,.prose p{font-size:16px;line-height:1.62} .lead,.band__sub{font-size:16.5px} .entry .also{font-size:15px} .entry .how p{font-size:16px} .entry .ages span{font-size:13px;padding:7px 13px} .entry .how b,.eyebrow,.toc .grp{font-size:11.5px} .chips li,.gl-chips b{font-size:15.5px} .facts dd{font-size:18px} .facts dd small,.info .v small{font-size:15px} .steps p,.b-steps p{font-size:15.5px} .marquee__group b{font-size:18px} .ftr ul a,.ftr__bottom{font-size:15px} .form-note,.muted{font-size:15.5px} /* breathing room, so neighbouring targets are never mistaken for each other */ .btns{gap:12px} .symptoms{gap:12px} .chips{gap:10px 18px} } @media (max-width:640px){ /* one column, full-width actions: the thumb should never have to aim */ .btns .btn{flex:1 1 100%;justify-content:center} .doors,.grid--2,.grid--3,.symptoms{grid-template-columns:1fr} .band__n{font-size:clamp(56px,20vw,96px);top:10px;right:14px} .hero{min-height:auto;padding-block:clamp(40px,12vw,64px)} .pane{width:100%} .split-bands>.band{min-height:auto;padding-block:clamp(28px,8vw,44px)} .entry{padding-block:26px} .info li{grid-template-columns:1fr;gap:4px} .info .k{font-size:11.5px} } @media (max-width:1159px){ /* the logo is a link home, so it is a target like any other */ .lockup{min-height:44px} .ftr ul a,.ftr__bottom a{display:inline-flex;align-items:center;min-height:44px} .ftr ul{gap:2px} .info a,.prose a{display:inline-flex;align-items:center;min-height:44px} .carousel__dots button{min-height:44px;min-width:44px;background:none;position:relative} .carousel__dots button::after{content:"";position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--surface-3)} .carousel__dots button[aria-current="true"]::after{background:var(--accent);width:26px;border-radius:5px} .lightbox button{min-width:48px;min-height:48px} /* remaining small type */ .prose li,.entry li,.b-p,.b-lede{font-size:16px} .b-steps p,.b-spec,.b-spec td,.b-index .d{font-size:15.5px} .b-cta{min-height:44px;display:inline-flex;align-items:center;font-size:15px} .b-top nav a{min-height:44px;display:inline-flex;align-items:center;font-size:15px} .hscroll__card p,.hscroll__card .tagline{font-size:15.5px} .door p{font-size:15.5px} .stack-card p{font-size:16px} } /* ─── touch: the press state is the tap confirmation ─────────────────────── A finger covers the control it is pressing, so the only feedback left is the shape moving under it. 120ms, below the 200ms floor for micro-interactions, because this one has to feel simultaneous with the touch, not sequential. */ @media (hover:none){ .btn,.chip,.card,.entry,.hscroll__card,.toc a,.faq summary,.drawer a{ transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s ease, background .2s ease,color .2s ease} .btn:active,.chip:active{transform:scale(.962)} .card:active,.hscroll__card:active,.entry:active,.faq summary:active{transform:scale(.988)} .toc a:active,.drawer a:active{transform:translateX(3px)} } @media (hover:none) and (prefers-reduced-motion:reduce){ .btn:active,.chip:active,.card:active,.hscroll__card:active, .entry:active,.faq summary:active,.toc a:active,.drawer a:active{transform:none} } /* ─── WCAG 2.5.8: 24px is the floor for a pointer target ─────────────────── Footer links sat at 21-22px. Padding rather than line-height, so the text metrics and the underline position stay exactly where they were. */ .ftr__top a,.ftr a,.v a{display:inline-block;padding-block:3px} /* ═══ grouped menu ═════════════════════════════════════════════════════════ Four tops instead of eight links. Each panel carries a line of description, because a dropdown that only repeats the page titles has cost the visitor a click and given nothing back. */ .nav>ul{gap:2px} .nav__item{position:relative} /* .nav ul is a flex row for the bar; the panel's own list is not */ .nav__panel ul{display:block} .nav__panel li{display:block} /* the bar's plain-link styling would fight the group tops */ .nav .nav__top,.nav .nav__panel a{border-bottom:0} .nav__top{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 12px; border-radius:10px; font:inherit;font-size:15px;font-weight:600;color:var(--ink-2);background:none;border:0; cursor:pointer;white-space:nowrap;text-decoration:none; transition:color .2s ease,background .2s ease} .nav__top:hover{color:var(--ink);background:var(--surface-2)} .nav__item.is-here>.nav__top,.nav__top[aria-current="page"]{color:var(--ink)} .nav__item.is-here>.nav__top::after,.nav__top[aria-current="page"]::after{ content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px; border-radius:2px;background:var(--accent)} .nav__top svg{width:10px;height:7px;flex:none;opacity:.55;transition:transform .28s var(--ease-out)} .nav__item.is-open>.nav__top{color:var(--ink);background:var(--surface-2)} .nav__item.is-open>.nav__top svg{transform:rotate(180deg)} .nav__panel{position:absolute;top:calc(100% + 10px);left:0;z-index:5;min-width:302px; padding:7px;border-radius:16px;background:var(--surface);border:1px solid var(--line); box-shadow:0 24px 60px -34px rgba(20,28,39,.55),0 2px 10px -6px rgba(20,28,39,.2); opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:22px 0; transition:opacity .22s ease,transform .28s var(--ease-out),visibility 0s .28s} .nav__item.is-open>.nav__panel{opacity:1;visibility:visible;transform:none; transition:opacity .2s ease,transform .34s var(--ease-out),visibility 0s} .nav__panel ul{list-style:none;margin:0;padding:0} .nav__panel a{display:block;padding:11px 13px;border-radius:11px;text-decoration:none; transition:background .18s ease} .nav__panel a:hover,.nav__panel a:focus-visible{background:var(--surface-2)} .nav__panel b{display:block;font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em} .nav__panel span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted)} .nav__panel a[aria-current="page"] b{color:var(--accent-ink)} .nav__panel a[aria-current="page"]{background:var(--surface-2)} /* ─── the same four groups on a phone, as an accordion ──────────────────── */ .drawer__menu{list-style:none;margin:0;padding:6px 0 16px} .drawer__menu .grp__top{display:flex;align-items:center;justify-content:space-between; width:100%;gap:14px;padding:15px 0;font:inherit;font-size:17px;font-weight:600; color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line); text-align:left;cursor:pointer;min-height:52px} .drawer__menu .grp__top svg{width:12px;height:8px;flex:none;opacity:.5; transition:transform .3s var(--ease-out)} .drawer__menu .grp.is-open .grp__top svg{transform:rotate(180deg)} .drawer__menu .grp.is-open>.grp__top{color:var(--accent-ink)} .drawer__menu .grp__panel{overflow:hidden;max-height:0;transition:max-height .38s var(--ease-out)} .drawer__menu .grp.is-open>.grp__panel{max-height:320px} .drawer__menu .grp__panel ul{list-style:none;margin:0;padding:0} .drawer__menu .grp__panel a{display:flex;align-items:center;min-height:48px; padding:12px 0 12px 16px;font-size:16px;font-weight:500;color:var(--ink-2); border-bottom:1px solid var(--line);text-decoration:none} .drawer__menu .grp__panel a[aria-current="page"]{color:var(--accent-ink);font-weight:650} .drawer__menu a[aria-current="page"].grp__top{color:var(--accent-ink)} /* ─── standing call to action, bottom right ──────────────────────────────── Desktop only. The phone already carries the same action in the call bar pinned to the thumb zone, and two of them would sit on top of each other. It arrives past the hero and steps aside over the contact block, where it would cover the thing it is pointing at. */ /* ─── the call button ────────────────────────────────────────────────────── Small, dark, one action. A 64px block of saturated turquoise broke the rule this whole design runs on, which is that the accent appears in three small places and nowhere else. So the accent is the glyph and the button is ink. 52px across, comfortably past the 44px a fingertip needs and half the visual weight. Ink is 15.7:1 against the page and 13.5:1 against the stone sections but vanishes on the dark bands, so a light hairline at 45% carries it there at 3.8:1 while staying invisible on the light ones. Each covers what the other cannot, and neither is ever seen doing it. The width is not fixed: the label starts at max-width 0, so the button measures 20px of glyph plus its padding. On a device with a pointer the label opens on hover, because a desktop visitor cannot tap to dial and has to read the number. A touch screen has no hover and it stays a circle. */ .fab{position:fixed;right:clamp(14px,2vw,26px); bottom:calc(clamp(14px,2vw,26px) + env(safe-area-inset-bottom));z-index:65; display:inline-flex;align-items:center;justify-content:center; min-width:52px;height:52px;padding:0 16px;border-radius:999px; background:var(--ink);color:#fff;text-decoration:none; box-shadow:0 0 0 1px rgba(242,239,234,.45), 0 10px 24px -12px rgba(20,28,39,.55),0 2px 6px -3px rgba(20,28,39,.3); transform:translateY(12px) scale(.94);opacity:0;pointer-events:none; transition:transform .4s var(--ease-out),opacity .3s ease, box-shadow .25s ease,background .25s ease} .fab svg{width:20px;height:20px;flex:none;color:var(--accent)} /* 6.65:1 on ink */ .fab span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0; font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.01em; transition:max-width .4s var(--ease-out),opacity .26s ease,margin .4s var(--ease-out)} .fab.is-up{transform:none;opacity:1;pointer-events:auto} @media (hover:hover) and (pointer:fine){ .fab:hover,.fab:focus-visible{background:#0B1016; box-shadow:0 0 0 1px rgba(242,239,234,.45), 0 14px 30px -12px rgba(20,28,39,.6),0 3px 8px -3px rgba(20,28,39,.35)} .fab:hover span,.fab:focus-visible span{max-width:180px;opacity:1;margin-left:10px} } @media (hover:none){ /* the press is the only confirmation a finger gets */ .fab{transition:transform .16s cubic-bezier(.3,.7,.4,1),opacity .3s ease} .fab.is-up:active{transform:scale(.92)} } /* an accent outline on an accent button is no outline at all */ .fab:focus-visible{outline:3px solid var(--accent);outline-offset:3px} @media (prefers-reduced-motion:reduce){ .fab{transition:none} .fab,.fab.is-up{transform:none} } /* ─── the footer, on a phone ─────────────────────────────────────────────── It was 1126px, 1.44 of a 780px screen, and 440px of that was nine links in a single column. Two columns turn nine rows into five without shrinking a single tap target, which is where nearly all of the saving comes from. The rest is padding that was tuned for a desktop three-column layout and never revisited for a stacked one. */ @media (max-width:819px){ .ftr{padding-block:36px 0} .ftr__top{gap:26px} /* nine links, five rows */ .ftr__top > div:nth-child(2) ul{display:grid;grid-template-columns:1fr 1fr; gap:2px 16px;align-items:start} .ftr__top > div:nth-child(2) ul a{width:100%} .ftr h4{margin-bottom:10px} .ftr__top > div:first-child p{max-width:38ch;margin-top:12px} .ftr__bottom{margin-top:26px;padding-block:16px;gap:6px 20px} } .nowrap{white-space:nowrap} /* ─── the two phases, side by side ─────────────────────────────────────── */ .phases{display:grid;gap:18px} @media (min-width:620px){.phases{grid-template-columns:1fr 1fr}} .phases .card{display:flex;flex-direction:column} .phases .stack-card__n{width:auto;min-width:34px;padding-inline:10px;border-radius:999px} .phases h3{margin-bottom:8px} .phases p{color:var(--ink-2);font-size:15.5px;line-height:1.6} .phases ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px} .phases li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5;color:var(--ink-2)} .phases li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px; border-radius:50%;background:var(--accent)} /* ─── a link inside a paragraph has to look like one ─────────────────────── Body links were carrying colour alone, which is not enough on its own and was invisible to the client on the first read. They get an underline that sits clear of the descenders and thickens on hover. */ .prose a:not(.btn),.entry p a,.band__sub a,.lead a,.card p a,.faq p a{ color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1.5px; text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent); transition:text-decoration-color .2s ease,color .2s ease} .prose a:not(.btn):hover,.entry p a:hover,.band__sub a:hover,.lead a:hover,.card p a:hover, .faq p a:hover{text-decoration-color:currentColor} .band--slate .prose a:not(.btn),.band--ink .prose a:not(.btn), .band--slate .band__sub a,.band--ink .band__sub a{color:var(--accent)} /* ─── περιστατικά: πριν και μετά ───────────────────────────────────────── Τέσσερις λήψεις ανά πλευρά, όχι μία. Μία φωτογραφία πριν και μία μετά επιτρέπει να διαλέξει κανείς τη γωνία που κολακεύει· τέσσερις ίδιες λήψεις και στις δύο πλευρές δεν το επιτρέπουν. */ .cases{display:grid;gap:clamp(30px,4.5vw,56px)} .case{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:clamp(20px,3vw,30px); display:grid;gap:clamp(18px,2.6vw,30px)} @media (min-width:760px){.case{grid-template-columns:1fr 1fr}} .case>.stack-card__n{position:absolute;top:clamp(20px,3vw,30px);right:clamp(20px,3vw,30px); margin:0;z-index:1} .case__side h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:9px} .case__side h4::before{content:"";width:8px;height:8px;border-radius:50%; background:var(--surface-3);flex:none} .case__side--meta h4::before{background:var(--accent)} .case__side--meta h4{color:var(--accent-ink)} .case__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .case__grid img{display:block;width:100%;aspect-ratio:4/2.6;object-fit:cover; border-radius:10px;background:var(--surface-2)} /* ═══ ΕΣΠΑ ══════════════════════════════════════════════════════════════════ Obligation of the ΕΠΑνΕΚ grant: the EU emblem with the ΕΣΠΑ and ΕΠΑνΕΚ marks must be visible on entry, inside the screen, without scrolling. So the strip sits above the header, not in it: it is there on arrival, then scrolls away with the page and the header takes the top as before. The banner is logos with small print, so it is a PNG and is never scaled above its native size. */ .espa{background:#fff;border-bottom:1px solid var(--line)} .espa__link{display:flex;justify-content:center;align-items:center;padding:7px var(--pad)} .espa__link img{display:block;height:44px;width:auto;max-width:100%} .espa__link:focus-visible{outline:3px solid var(--accent);outline-offset:-3px} .ftr__espa{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12); display:grid;gap:14px 28px;align-items:center} @media (min-width:820px){.ftr__espa{grid-template-columns:auto 1fr}} /* the banner link is a tap target too: 44px tall even when the image is 34 */ .ftr__espa>a{display:inline-flex;align-items:center;min-height:44px} .ftr__espa img{display:block;height:40px;width:auto;max-width:100%;background:#fff; padding:6px 10px;border-radius:8px} .ftr__espa p{font-size:13.5px;line-height:1.55;color:#98A5B4;max-width:72ch} .ftr__espa p a{color:#CBD4DE;text-decoration:underline;text-underline-offset:3px} @media (max-width:1159px){ /* On a phone the 730px banner has to shrink to the screen: 32px tall keeps the EU emblem and the two marks legible, and the strip stays a strip. */ .espa__link{padding:6px 12px} .espa__link img{height:32px} .ftr__espa img{height:34px;padding:5px 8px;justify-self:start} } @media (max-width:400px){ .espa__link img{height:auto;width:100%;max-width:360px} } /* ═══ accessibility widget (Sienna) ═════════════════════════════════════════ Its button lands bottom-left; ours for calling is bottom-right. It ships as a blue gradient disc with a 5px blue outline and a 3px white border, all declared !important in a