/* ===================================================================== Humera · v23 · σχεδίαση (?d) × φόντο (?bg) × γράμματα (?f), ανεξάρτητα Σχεδίαση: 3 Αιθρία · 4 Εικονογράμματα · 5 Σήμανση · 6 Περιθώριο · 7 Άξονας · 8 Πίνακας (οι 6/7/8 πατούν στην παλέτα των 3/4/5 μέσω data-d και προσθέτουν σύνθεση μέσω data-c) Header: της Αιθρίας σε όλες (οριστικό, 12/10). ===================================================================== */ /* ---------- Header της Αιθρίας παντού ---------- */ html[data-d] { --fringe: linear-gradient(90deg, #8FD3BD, #EFB3C3 50%, #B3A5E8); } html[data-d] .hdr { top: 14px; left: 50%; right: auto; transform: translateX(-50%); width: auto; height: 52px; border-radius: 999px; padding: 5px 8px 5px 18px; background: rgba(255,255,255,.96); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background-image: var(--fringe); background-size: 60% 1px; background-position: 50% 100%; background-repeat: no-repeat; } html[data-d] :is(.hdr__nav a, .hdr__link) { border-radius: 999px; } html[data-d] .sheet { background: #FFFFFF; border: 0; border-radius: 22px; box-shadow: 0 30px 60px -40px rgba(38,48,60,.35); } @media (max-width: 900px) { html[data-d] .hdr { left: var(--gutter); right: var(--gutter); transform: none; height: 54px; top: 10px; padding: 5px 16px 5px 5px; } } /* ---------- Γράμματα: Source Sans 3 (f=1) ---------- */ html[data-f="1"] { --f: 'Source Sans 3', system-ui, sans-serif; --f-t: 'Source Sans 3', system-ui, sans-serif; --fv-t: normal; } html[data-f="1"][data-d="3"] { --w-display: 300; --w-page: 300; --w-section: 300; --w-sol: 500; --w-state: 300; --w-lead: 400; --w-body: 400; --w-h3: 600; --w-label: 500; --w-ui: 600; --s-body: 1.0625rem; } html[data-f="1"][data-d="4"] { --w-display: 400; --w-page: 400; --w-section: 400; --w-sol: 600; --w-state: 400; --w-body: 400; --w-h3: 600; --w-label: 600; --w-ui: 600; --s-body: 1.0625rem; } html[data-f="1"][data-d="5"] { --w-display: 600; --w-page: 600; --w-section: 600; --w-sol: 600; --w-state: 500; --w-body: 400; --w-h3: 700; --w-label: 700; --w-ui: 600; --s-body: 1.0625rem; } /* ---------- Διορθώσεις κειμένου σε σκούρες κάρτες (NousGym, «Σχετικά») ---------- */ html[data-t] .ncard:not(.is-side) :is(h3, .ncard__top) { color: #FFFFFF !important; } html[data-t] .ncard:not(.is-side) p { color: #D3D9E8 !important; } html[data-t] .ncard:not(.is-side) .ncard__top b { color: #F2A27C !important; } html[data-t] .ncard.is-side h3 { color: #0E1A3C !important; } html[data-t] .ncard.is-side :is(p, .ncard__top) { color: #4A546E !important; } html[data-t] .mini :is(h3, p) { color: #FFFFFF !important; } html[data-t] .mini .mini__top { color: #C9D0E2 !important; } html[data-t] .mini .mini__top b { color: #F2A27C !important; } /* ---------- Αιθρία: πιο επιλεκτικό τόνισμα ---------- Λιγότερα ισότιμα στοιχεία: οι τίτλοι ενοτήτων παίρνουν βάρος και μέγεθος, οι εισαγωγές μελάνι, το υπόλοιπο κείμενο υποχωρεί. Μία έμφαση ανά ενότητα: η πρώτη κάρτα/πλαίσιο κάθε ομάδας. */ html[data-d="3"] { --s-section: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); --tx-2: rgba(38,48,60,.66); } html[data-d="3"] :is(.h-l, .contact__intro .h-l) { color: #1B2430; } html[data-d="3"] :is(.lead, .sol__desc, .sx-pane__h) { color: #1B2430; } html[data-d="3"] .v4-tile--single, html[data-d="3"] .how__step:first-of-type h3 { } html[data-d="3"] .eyebrow { color: #7A6FB8; } html[data-d="3"] .v4-grid > .v4-tile:first-child { background: #26303C; } html[data-d="3"] .v4-grid > .v4-tile:first-child :is(h3, p) { color: #FFFFFF; } html[data-d="3"] .v4-grid > .v4-tile:first-child .m-box { fill: rgba(255,255,255,.95); } html[data-d="3"] .v4-grid > .v4-tile:first-child .m-echo { stroke: rgba(255,255,255,.35); } html[data-d="3"] .v4-grid > .v4-tile:first-child .m-time { stroke: rgba(255,255,255,.25); } /* ===================================================================== 6 · Περιθώριο (πάνω στην Αιθρία): ετικέτες στο αριστερό περιθώριο, τίτλοι μετατοπισμένοι στη στήλη κειμένου, κανένα κουτί γύρω από τα κείμενα, μία σκούρη έμφαση ανά σελίδα. ===================================================================== */ html[data-c="6"] { --s-section: clamp(2.375rem, 1.4rem + 2.9vw, 3.75rem); --lh-section: 1.04; } html[data-c="6"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal], .faq__grid > div:first-child) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; max-width: none; } html[data-c="6"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal]) > .eyebrow { grid-column: 1; grid-row: 1; margin: .9em 0 0; } html[data-c="6"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal]) > :not(.eyebrow) { grid-column: 2; } html[data-c="6"] .faq__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } html[data-c="6"] :is(.nous__surface, .sx-panel, .duo, .fx-board, .why__map) { background: transparent; box-shadow: none; border-radius: 0; border-top: 1px solid rgba(38,48,60,.18); padding-left: 0; padding-right: 0; } html[data-c="6"] .v4-tile { box-shadow: none; border-radius: 0; background: transparent; border-top: 1px solid rgba(38,48,60,.18); } html[data-c="6"] .v4-grid > .v4-tile:first-child { background: #26303C; border-radius: 0; border-top: 0; } html[data-c="6"] .contact__card { border-radius: 0; box-shadow: none; } html[data-c="6"] .foot { border-radius: 0; } html[data-c="6"] .eyebrow { font-style: italic; font-weight: 400; font-size: 1rem; color: #7A6FB8; } html[data-c="6"] .sx-vis::before { border-radius: 0; } html[data-c="6"] .whyB__col { border-top: 0; } @media (max-width: 900px) { html[data-c="6"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal], .faq__grid > div:first-child, .faq__grid) { grid-template-columns: minmax(0, 1fr); } html[data-c="6"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal]) > * { grid-column: 1 !important; grid-row: auto !important; } } /* ===================================================================== 7 · Άξονας (πάνω στα Εικονογράμματα): οι κεφαλίδες ενοτήτων στο κέντρο, μεγάλη αντίθεση μεγέθους, λευκά τετράγωνα πλαίσια με χρωματική γραμμή ανά λύση, πολύς αέρας. ===================================================================== */ html[data-c="7"] { --s-section: clamp(2.375rem, 1.3rem + 3.2vw, 4rem); --w-section: 500; --lh-section: 1.02; --sec: clamp(150px, 19vh, 220px); } html[data-c="7"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal], .faq__grid > div:first-child) { text-align: center; margin-left: auto; margin-right: auto; max-width: 46rem; } html[data-c="7"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal]) .h-l { margin-left: auto; margin-right: auto; max-width: 20ch; } html[data-c="7"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal]) .eyebrow { justify-content: center; } html[data-c="7"] .faq__grid { grid-template-columns: minmax(0, 1fr); max-width: 52rem; margin: 0 auto; } html[data-c="7"] :is(.nous__surface, .sx-panel, .duo, .fx-board, .why__map, .contact__card) { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(26,29,33,.1); border-radius: 0; } html[data-c="7"] .foot { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(26,29,33,.1); border-radius: 0; } html[data-c="7"] .v4-tile { background: #FFFFFF; } html[data-c="7"] .whyB__col { text-align: center; border-top: 0; } html[data-c="7"] .whyB__col p { margin-left: auto; margin-right: auto; } /* ===================================================================== 8 · Πίνακας (πάνω στη Σήμανση): πυκνός πίνακας, ετικέτα-πινακίδα και τίτλος στην ίδια γραμμή, πλαίσια με περίγραμμα και navy μπάρα στην κορυφή, μικρότεροι βαρείς τίτλοι. ===================================================================== */ html[data-c="8"] { --s-section: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); --w-section: 700; --sec: clamp(104px, 13vh, 150px); } html[data-c="8"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal], .faq__grid > div:first-child) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; row-gap: 10px; max-width: none; padding-bottom: 18px; border-bottom: 2px solid var(--plate, #0E1A3C); } html[data-c="8"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal]) .eyebrow { order: 0; margin: 0; transform: translateY(-.35em); } html[data-c="8"] :is(.why__intro, .v3-head, .v4-head, .how .wrap > [data-reveal]) .h-l { order: 1; flex: 1 1 18ch; } html[data-c="8"] :is(.nous__surface, .sx-panel, .duo, .fx-board, .why__map, .contact__card, .v4-tile) { background: #FFFFFF; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(14,26,60,.16), inset 0 6px 0 #0E1A3C; } html[data-c="8"] .foot { border-radius: 0 0 6px 6px; box-shadow: inset 0 0 0 1px rgba(14,26,60,.16); } html[data-c="8"] .whyB { gap: 0; } html[data-c="8"] .whyB__col { padding: 18px; border: 1px solid rgba(14,26,60,.14); border-top: 6px solid #0E1A3C; margin: 0 -1px 0 0; } /* επιλογέας */ .lab__t b { font-weight: 600; opacity: .55; padding: 0 6px 0 2px; } .lab__d a, .lab__f a { padding-left: 8px; padding-right: 8px; white-space: nowrap; } html[data-sel="3"] [data-sp="3"], html[data-sel="4"] [data-sp="4"], html[data-sel="5"] [data-sp="5"], html[data-sel="6"] [data-sp="6"], html[data-sel="7"] [data-sp="7"], html[data-sel="8"] [data-sp="8"], html[data-f="1"] [data-fp="1"], html[data-f="0"] [data-fp="0"] { opacity: 1; background: #fff; color: #0E1A3C; border-radius: 999px; }