/* * Doctor Optic - EyeDrive akce 1. 11.-31. 12. 2026 * Component 2611eyedrive - v1.0.0 - cache key 20261023 * One stylesheet shared by TEST and PROD; it contains no environment-specific URL. * Scope: every component rule starts with #do-2611eyedrive. The only rules outside the root are * the uniquely named @font-face blocks, the four host-integration rules for the * do-2611eyedrive-host* classes assigned to this page's own Divi Section / Row / Column / Code module, * and one post-specific outer-article reset guarded by :has(#do-2611eyedrive). * Browser requirement for that reset: CSS :has() (Chrome/Edge 105+, Safari 15.4+, Firefox 121+); * where :has() is unsupported only that one rule is dropped and the 52 px gap below the component remains. * External dependency: official Google Fonts WOFF2 files on fonts.gstatic.com * (Montserrat v31, Open Sans v44, SIL Open Font License 1.1), latin + latin-ext subsets, * registered under component-only family names. Fallback: "Segoe UI", "Helvetica Neue", Arial, sans-serif. */ /* ---------- Fonts: component-only family names (no global Montserrat/Open Sans registration) ---------- */ @font-face{font-family:"do-2611eyedrive-montserrat";font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"do-2611eyedrive-montserrat";font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");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:"do-2611eyedrive-montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"do-2611eyedrive-montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");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:"do-2611eyedrive-montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"do-2611eyedrive-montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");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:"do-2611eyedrive-montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"do-2611eyedrive-montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");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:"do-2611eyedrive-montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"do-2611eyedrive-montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");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:"do-2611eyedrive-open-sans";font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"do-2611eyedrive-open-sans";font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");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:"do-2611eyedrive-open-sans";font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"do-2611eyedrive-open-sans";font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");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:"do-2611eyedrive-open-sans";font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"do-2611eyedrive-open-sans";font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");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} /* ---------- Host integration: only this page's Divi elements carrying the do-2611eyedrive-host* classes ---------- */ /* Regular Section: full width, no outer spacing, top 0 on all devices */ .et_pb_section.do-2611eyedrive-host{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important} /* Row: neutralises the site-wide mobile `.et_pb_row{width:90%!important}` for this row only; the component owns the 80 %/90 % width */ .et_pb_row.do-2611eyedrive-host-row{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important} /* Column: removes Divi's <=980 px column margin-bottom and any padding */ .et_pb_column.do-2611eyedrive-host-col{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important} /* Code module: no module spacing */ .et_pb_module.do-2611eyedrive-host-code{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important} /* Outer post article: public Divi gives it padding-bottom 25px + margin-bottom 27px (52 px gap before the global guarantee block); applies only to post 118610 and only while it contains this component */ article#post-118610.et_pb_post:has(#do-2611eyedrive){margin-bottom:0!important;padding-bottom:0!important} /* ---------- Component root ---------- */ #do-2611eyedrive{ --d2611-navy:#25428A; --d2611-navy-deep:#14275A; --d2611-teal:#62AFA0; --d2611-teal-ink:#1D6B5E; --d2611-tint:#EAF5F2; --d2611-yellow:#FFE600; --d2611-red:#C8102E; --d2611-green:#00CC99; --d2611-ink:#272727; --d2611-muted:#4A5568; --d2611-line:#D5DEE8; --d2611-paper:#F3F5F8; --d2611-f-head:"do-2611eyedrive-montserrat","Segoe UI","Helvetica Neue",Arial,sans-serif; --d2611-f-body:"do-2611eyedrive-open-sans","Segoe UI","Helvetica Neue",Arial,sans-serif; --d2611-h1:clamp(1.875rem, 1.597rem + 1.653vw, 3.25rem); --d2611-h2:clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); --d2611-sec-pad:clamp(56px, 6.5vw, 128px); --d2611-hero-top:clamp(40px, 4.2vw, 96px); display:block;width:100%;max-width:100%;margin:0;padding:0; background:#fff;color:var(--d2611-ink);font-family:var(--d2611-f-body);font-size:19px;font-style:normal;font-weight:400;line-height:1.7; letter-spacing:normal;word-spacing:normal;text-align:left;text-indent:0;text-transform:none;text-shadow:none; -webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto } #do-2611eyedrive,#do-2611eyedrive *,#do-2611eyedrive *::before,#do-2611eyedrive *::after{box-sizing:border-box} /* Scoped resets against inherited Divi/theme element styles (h/p padding, ul padding + line-height 26px, figure margin, link colours). Element selectors under the root (specificity 1,0,1) always lose to the component class rules below (1,1,0 and higher). */ #do-2611eyedrive section,#do-2611eyedrive div,#do-2611eyedrive p,#do-2611eyedrive h1,#do-2611eyedrive h2,#do-2611eyedrive ul,#do-2611eyedrive ol,#do-2611eyedrive li,#do-2611eyedrive figure,#do-2611eyedrive details,#do-2611eyedrive summary{margin:0;padding:0} #do-2611eyedrive p,#do-2611eyedrive ul,#do-2611eyedrive ol,#do-2611eyedrive li,#do-2611eyedrive figure,#do-2611eyedrive details,#do-2611eyedrive summary,#do-2611eyedrive span,#do-2611eyedrive strong,#do-2611eyedrive a{font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;text-transform:inherit} #do-2611eyedrive ul,#do-2611eyedrive ol{list-style:none} /* The site sets h1/h2 font-family with !important; this root-scoped !important is the only override needed to keep the component face */ #do-2611eyedrive h1,#do-2611eyedrive h2{font-family:var(--d2611-f-head)!important;font-style:normal;color:var(--d2611-navy);text-transform:none} #do-2611eyedrive img{display:block;max-width:100%;border:0} #do-2611eyedrive strong{font-weight:700} /* Divi-like rows: 80 % / max 1920 px on desktop, 90 % below 981 px */ #do-2611eyedrive .do-2611eyedrive-row{width:80%;max-width:1920px;margin-inline:auto} #do-2611eyedrive .do-2611eyedrive-prose{max-width:72ch} #do-2611eyedrive .do-2611eyedrive-h2{font-size:var(--d2611-h2);font-weight:400;line-height:1.25;letter-spacing:-.005em} #do-2611eyedrive a:focus-visible,#do-2611eyedrive summary:focus-visible{outline:3px solid var(--d2611-navy);outline-offset:4px;border-radius:4px} /* Primary CTA */ #do-2611eyedrive .do-2611eyedrive-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:.8em 1.9em;border:2px solid var(--d2611-green);border-radius:40px;background:var(--d2611-green);color:var(--d2611-navy);font-family:var(--d2611-f-head);font-size:16px;font-weight:700;line-height:1.2;text-transform:uppercase;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease} #do-2611eyedrive .do-2611eyedrive-btn:hover{background:var(--d2611-navy);border-color:var(--d2611-navy);color:#fff} #do-2611eyedrive .do-2611eyedrive-btn:focus-visible{outline:3px solid var(--d2611-navy);outline-offset:4px;border-radius:40px} #do-2611eyedrive .do-2611eyedrive-btn svg{flex:none;width:1.05em;height:1.05em} /* Exact local crops of campaign artwork (keeps baked-in text outside the frame) */ #do-2611eyedrive .do-2611eyedrive-crop{position:relative;overflow:hidden;margin:0;aspect-ratio:var(--d2611-ar);background:#C9D3DE} #do-2611eyedrive .do-2611eyedrive-crop img{position:absolute;max-width:none;width:calc(100% / var(--d2611-cw));height:auto;left:calc(var(--d2611-cx) / var(--d2611-cw) * -100%);top:calc(var(--d2611-cy) / var(--d2611-ch) * -100%)} #do-2611eyedrive .do-2611eyedrive-crop--hero{--d2611-cx:.07506;--d2611-cy:.16879;--d2611-cw:.33996;--d2611-ch:.30088;--d2611-ar:2.0033} #do-2611eyedrive .do-2611eyedrive-crop--frame{--d2611-cx:.06667;--d2611-cy:.18406;--d2611-cw:.30667;--d2611-ch:.17594;--d2611-ar:1.3073} @media (min-width:600px){ #do-2611eyedrive .do-2611eyedrive-crop--hero{--d2611-cx:0;--d2611-cw:.45006;--d2611-ch:.39873;--d2611-ar:2.0012} } @media (min-width:700px){ #do-2611eyedrive .do-2611eyedrive-crop--frame{--d2611-ch:.23;--d2611-ar:1} } @media (min-width:981px){ #do-2611eyedrive .do-2611eyedrive-crop--hero{--d2611-ch:.59344;--d2611-ar:1.3446} } /* ---------- 1. Hero ---------- */ #do-2611eyedrive .do-2611eyedrive-hero{position:relative;overflow:hidden;background:#fff} #do-2611eyedrive .do-2611eyedrive-hero__grid{display:flex;flex-direction:column} #do-2611eyedrive .do-2611eyedrive-hero__main,#do-2611eyedrive .do-2611eyedrive-hero__aside{display:contents} #do-2611eyedrive .do-2611eyedrive-hero__visual{order:1;position:relative} #do-2611eyedrive .do-2611eyedrive-hero__tag{order:2;display:flex;flex-wrap:wrap;column-gap:.45em;padding:11px 5%;background:var(--d2611-teal);color:var(--d2611-navy-deep);font-family:var(--d2611-f-head);font-size:14px;font-weight:700;line-height:1.45;letter-spacing:.01em} #do-2611eyedrive .do-2611eyedrive-hero__tag span{white-space:nowrap} #do-2611eyedrive .do-2611eyedrive-hero__copy{order:3;padding:24px 5% 0} #do-2611eyedrive .do-2611eyedrive-hero__more{order:4;margin:28px 5% 52px} #do-2611eyedrive .do-2611eyedrive-hero__title{font-size:var(--d2611-h1);font-weight:300;line-height:1.3;letter-spacing:-.005em} #do-2611eyedrive .do-2611eyedrive-hero__title span{display:block} #do-2611eyedrive .do-2611eyedrive-hero__lead{margin-top:12px;font-size:clamp(18px, .55vw + 15.5px, 23px);font-weight:600;line-height:1.5} #do-2611eyedrive .do-2611eyedrive-offer{max-width:620px;margin-top:clamp(20px, 2vw, 34px);overflow:hidden;border-radius:6px;background:var(--d2611-yellow);box-shadow:0 16px 36px -20px rgba(14,27,63,.5)} #do-2611eyedrive .do-2611eyedrive-offer__main{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"kicker scope" "num scope";column-gap:clamp(14px, 1.6vw, 26px);padding:clamp(14px, 1.4vw, 24px) clamp(16px, 1.8vw, 30px)} #do-2611eyedrive .do-2611eyedrive-offer__kicker{grid-area:kicker;align-self:end;color:var(--d2611-red);font-family:var(--d2611-f-head);font-size:clamp(15px, .5vw + 12px, 22px);font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase} #do-2611eyedrive .do-2611eyedrive-offer__num{grid-area:num;align-self:start;margin-top:4px;color:var(--d2611-red);font-family:var(--d2611-f-head);font-size:clamp(3.25rem, 1.6rem + 3.2vw, 6.5rem);font-weight:800;line-height:.92;letter-spacing:-.03em;white-space:nowrap} #do-2611eyedrive .do-2611eyedrive-offer__scope{grid-area:scope;display:flex;align-items:center;padding-left:clamp(14px, 1.6vw, 26px);border-left:2px solid rgba(37,66,138,.3);color:var(--d2611-navy);font-family:var(--d2611-f-head);font-size:clamp(16px, .6vw + 13px, 22px);font-weight:700;line-height:1.3} #do-2611eyedrive .do-2611eyedrive-offer__outlet{padding:.7em clamp(16px, 1.8vw, 30px);background:var(--d2611-navy);color:#fff;font-family:var(--d2611-f-head);font-size:clamp(15px, .35vw + 13.5px, 19px);font-weight:600;line-height:1.4} #do-2611eyedrive .do-2611eyedrive-offer__outlet strong{font-weight:800;letter-spacing:.03em} #do-2611eyedrive .do-2611eyedrive-offer__outlet .do-2611eyedrive-offer__y{color:var(--d2611-yellow);letter-spacing:0} #do-2611eyedrive .do-2611eyedrive-hero__also{display:flex;align-items:baseline;gap:12px;margin-top:16px;font-size:clamp(16px, .3vw + 14.5px, 19px);font-weight:600;line-height:1.5} #do-2611eyedrive .do-2611eyedrive-hero__also::before{content:"";flex:none;width:18px;height:3px;background:var(--d2611-teal-ink);transform:translateY(-.32em)} #do-2611eyedrive .do-2611eyedrive-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(22px, 2vw, 32px)} #do-2611eyedrive .do-2611eyedrive-cta-row__help{max-width:32ch;color:var(--d2611-muted);font-size:16px;line-height:1.5} #do-2611eyedrive .do-2611eyedrive-hero__note{max-width:620px;margin-top:20px;padding-top:14px;border-top:1px solid var(--d2611-line);color:var(--d2611-navy-deep);font-size:16px;font-weight:600;line-height:1.55} #do-2611eyedrive .do-2611eyedrive-hero__more{max-width:60ch;padding-left:20px;border-left:3px solid var(--d2611-teal);font-size:inherit;line-height:1.7} #do-2611eyedrive .do-2611eyedrive-hero__more strong{color:var(--d2611-navy)} @media (max-width:599px){ #do-2611eyedrive .do-2611eyedrive-cta-row .do-2611eyedrive-btn{width:100%} } @media (min-width:981px){ #do-2611eyedrive .do-2611eyedrive-hero{padding:0 0 var(--d2611-sec-pad)} #do-2611eyedrive .do-2611eyedrive-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:clamp(40px, 5%, 128px);align-items:start;width:80%;max-width:1920px;margin-inline:auto} #do-2611eyedrive .do-2611eyedrive-hero__main,#do-2611eyedrive .do-2611eyedrive-hero__aside{display:block} /* Section and row stay at padding-top 0; the breathing space lives inside the columns */ #do-2611eyedrive .do-2611eyedrive-hero__main,#do-2611eyedrive .do-2611eyedrive-hero__visual{padding-top:var(--d2611-hero-top)} #do-2611eyedrive .do-2611eyedrive-hero__tag{display:inline-flex;padding:.5em .95em;border-radius:4px;font-size:15px} #do-2611eyedrive .do-2611eyedrive-hero__copy{padding:0;margin-top:26px} #do-2611eyedrive .do-2611eyedrive-hero__more{margin:clamp(28px, 2.4vw, 44px) 0 0} #do-2611eyedrive .do-2611eyedrive-hero__visual::before{content:"";position:absolute;z-index:0;top:0;bottom:calc((100% - var(--d2611-hero-top)) * .2);left:30%;right:-50vw;background:var(--d2611-teal)} #do-2611eyedrive .do-2611eyedrive-hero__media{z-index:1;border-radius:4px;box-shadow:0 28px 60px -30px rgba(14,27,63,.55)} } /* ---------- 2. Benefit (dusk to night) ---------- */ #do-2611eyedrive .do-2611eyedrive-drive{position:relative;overflow:hidden;padding-block:var(--d2611-sec-pad);background:linear-gradient(165deg,#2B4C8F 0%,#17295B 48%,#0B1636 100%);color:#C9D4EA} #do-2611eyedrive .do-2611eyedrive-drive__lights{position:absolute;inset:0;pointer-events:none} /* Static light streaks (former drift animation removed; streaks sit at the animation's midpoint) */ #do-2611eyedrive .do-2611eyedrive-light{position:absolute;height:2px;border-radius:2px;opacity:.75} #do-2611eyedrive .do-2611eyedrive-light--1{left:-8%;top:14%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,230,0,.45),transparent)} #do-2611eyedrive .do-2611eyedrive-light--2{left:58%;top:26%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)} #do-2611eyedrive .do-2611eyedrive-light--3{left:12%;top:71%;width:50%;background:linear-gradient(90deg,transparent,rgba(98,175,160,.6),transparent)} #do-2611eyedrive .do-2611eyedrive-light--4{left:64%;top:80%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,77,94,.4),transparent)} #do-2611eyedrive .do-2611eyedrive-light--5{left:-4%;top:90%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,230,0,.35),transparent)} #do-2611eyedrive .do-2611eyedrive-drive__grid{position:relative;display:grid;gap:28px} #do-2611eyedrive .do-2611eyedrive-drive__title{color:#fff} #do-2611eyedrive .do-2611eyedrive-drive__title span{display:block} #do-2611eyedrive .do-2611eyedrive-drive__title span + span{color:var(--d2611-yellow)} #do-2611eyedrive .do-2611eyedrive-drive__lead{color:#F2F5FB;font-size:clamp(19px, .55vw + 16px, 24px);line-height:1.6} #do-2611eyedrive .do-2611eyedrive-drive__text p + p{margin-top:22px} #do-2611eyedrive .do-2611eyedrive-drive__text strong{color:#fff;font-weight:600} #do-2611eyedrive .do-2611eyedrive-drive__horizon{position:relative;height:3px;margin-top:clamp(40px, 5vw, 88px);border-radius:3px;background:linear-gradient(90deg,#F6C86B 0%,#62AFA0 32%,#3C5FAF 66%,rgba(255,255,255,.06) 100%)} @media (min-width:981px){ #do-2611eyedrive .do-2611eyedrive-drive__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:6%;align-items:start} } /* ---------- 3. Own frame ---------- */ #do-2611eyedrive .do-2611eyedrive-frame{position:relative;overflow:hidden;padding-block:var(--d2611-sec-pad)} #do-2611eyedrive .do-2611eyedrive-frame__grid{display:grid;gap:40px;align-items:center} #do-2611eyedrive .do-2611eyedrive-frame__visual{position:relative;max-width:560px} #do-2611eyedrive .do-2611eyedrive-frame__visual::before{content:"";position:absolute;top:16%;right:30%;bottom:-10%;left:-50vw;background:var(--d2611-teal)} #do-2611eyedrive .do-2611eyedrive-frame__visual .do-2611eyedrive-crop{border-radius:4px;box-shadow:0 28px 60px -30px rgba(14,27,63,.5)} #do-2611eyedrive .do-2611eyedrive-frame__text p{margin-top:20px} #do-2611eyedrive .do-2611eyedrive-frame__callout{padding:20px 24px;border-left:4px solid var(--d2611-teal-ink);border-radius:0 6px 6px 0;background:var(--d2611-tint)} @media (min-width:700px){ #do-2611eyedrive .do-2611eyedrive-frame__grid{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:6%} } @media (min-width:981px){ #do-2611eyedrive .do-2611eyedrive-frame__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:7%} } /* ---------- 4. Visit and CTA ---------- */ #do-2611eyedrive .do-2611eyedrive-visit{padding-block:var(--d2611-sec-pad);background:var(--d2611-tint)} #do-2611eyedrive .do-2611eyedrive-visit__grid{display:grid;grid-template-areas:"title" "offer" "steps" "cta" "note";gap:24px} #do-2611eyedrive .do-2611eyedrive-visit__grid > h2{grid-area:title} #do-2611eyedrive .do-2611eyedrive-visit__offer{grid-area:offer;font-size:clamp(18px, .4vw + 16px, 22px);line-height:1.6} #do-2611eyedrive .do-2611eyedrive-hl{padding:0 .28em;border-radius:3px;background:var(--d2611-yellow);color:var(--d2611-navy);font-weight:800;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap} #do-2611eyedrive .do-2611eyedrive-steps{grid-area:steps;margin:0;padding:clamp(6px, 1vw, 16px) clamp(20px, 2.4vw, 44px);list-style:none;counter-reset:d2611-step;border-radius:8px;background:#fff;box-shadow:0 20px 44px -28px rgba(14,27,63,.4)} #do-2611eyedrive .do-2611eyedrive-steps li{counter-increment:d2611-step;display:grid;grid-template-columns:clamp(48px, 4.6vw, 84px) minmax(0,1fr);gap:clamp(12px, 1.6vw, 28px);align-items:center;padding:clamp(18px, 1.8vw, 30px) 0;font-size:clamp(17px, .4vw + 15px, 21px);font-weight:600;line-height:1.5} #do-2611eyedrive .do-2611eyedrive-steps li + li{border-top:1px solid var(--d2611-line)} #do-2611eyedrive .do-2611eyedrive-steps li::before{content:counter(d2611-step) ".";color:var(--d2611-navy);font-family:var(--d2611-f-head);font-size:clamp(40px, 3vw + 20px, 72px);font-weight:300;line-height:1} #do-2611eyedrive .do-2611eyedrive-visit__cta{grid-area:cta} #do-2611eyedrive .do-2611eyedrive-visit__note{grid-area:note;color:var(--d2611-navy-deep);font-size:17px;font-weight:600;line-height:1.55} @media (max-width:599px){ #do-2611eyedrive .do-2611eyedrive-visit__cta .do-2611eyedrive-btn{width:100%} } @media (min-width:981px){ #do-2611eyedrive .do-2611eyedrive-visit__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"title steps" "offer steps" "cta steps" "note steps";column-gap:7%;row-gap:0;align-items:start} #do-2611eyedrive .do-2611eyedrive-visit__offer{margin-top:22px} #do-2611eyedrive .do-2611eyedrive-visit__cta{margin-top:34px} #do-2611eyedrive .do-2611eyedrive-visit__note{margin-top:18px} } /* ---------- 5. FAQ (native details/summary, no JavaScript) ---------- */ #do-2611eyedrive .do-2611eyedrive-faq{padding-block:var(--d2611-sec-pad);background:#fff} #do-2611eyedrive .do-2611eyedrive-faq__grid{display:grid;gap:24px} #do-2611eyedrive .do-2611eyedrive-faq__list{border-top:1px solid var(--d2611-line)} #do-2611eyedrive .do-2611eyedrive-faq details{border-bottom:1px solid var(--d2611-line)} #do-2611eyedrive .do-2611eyedrive-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:22px 0;color:var(--d2611-navy);font-family:var(--d2611-f-head);font-size:clamp(18px, .35vw + 16px, 22px);font-weight:600;line-height:1.4;list-style:none;cursor:pointer} #do-2611eyedrive .do-2611eyedrive-faq summary::-webkit-details-marker{display:none} #do-2611eyedrive .do-2611eyedrive-faq summary::after{content:"";flex:none;width:16px;height:16px;margin-top:.3em;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat} #do-2611eyedrive .do-2611eyedrive-faq details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat} #do-2611eyedrive .do-2611eyedrive-faq summary:hover{color:var(--d2611-teal-ink)} #do-2611eyedrive .do-2611eyedrive-faq__a{padding:0 40px 26px 0} @media (min-width:981px){ #do-2611eyedrive .do-2611eyedrive-faq__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:6%;align-items:start} } /* ---------- 6. Conditions ---------- */ #do-2611eyedrive .do-2611eyedrive-terms{padding-block:var(--d2611-sec-pad);background:var(--d2611-paper)} #do-2611eyedrive .do-2611eyedrive-terms__grid{display:grid;gap:24px} #do-2611eyedrive .do-2611eyedrive-terms__body{font-size:clamp(17px, .2vw + 16px, 19px)} #do-2611eyedrive .do-2611eyedrive-terms__intro{font-weight:700;color:var(--d2611-navy-deep)} #do-2611eyedrive .do-2611eyedrive-terms__list{margin:18px 0 0;padding:0;list-style:none} #do-2611eyedrive .do-2611eyedrive-terms__list li{position:relative;padding:12px 0 12px 26px;border-top:1px solid var(--d2611-line)} #do-2611eyedrive .do-2611eyedrive-terms__list li:last-child{border-bottom:1px solid var(--d2611-line)} #do-2611eyedrive .do-2611eyedrive-terms__list li::before{content:"";position:absolute;left:2px;top:calc(12px + .85em - 4px);width:8px;height:8px;background:var(--d2611-teal-ink)} @media (min-width:981px){ #do-2611eyedrive .do-2611eyedrive-terms__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:6%;align-items:start} } @media (max-width:980px){ #do-2611eyedrive .do-2611eyedrive-row{width:90%} } /* Approved 17 px phone body; deliberately not the site-wide 14 px phone body size */ @media (max-width:767px){ #do-2611eyedrive{font-size:17px} } @media (prefers-reduced-motion:reduce){ #do-2611eyedrive,#do-2611eyedrive *,#do-2611eyedrive *::before,#do-2611eyedrive *::after{animation:none!important;transition:none!important} }