/* SMO Fancy Pages -- shared styles, Light/Dark via [data-smo-theme] on */ html { --smo-bg:#0d0d0d; --smo-bg-alt:#161616; --smo-card:#1a1a1c; --smo-text:#f5f5f5; --smo-text-dim:#a8a8ac; --smo-accent:#e53935; --smo-border:rgba(255,255,255,.1); } html[data-smo-theme="light"] { --smo-bg:#ffffff; --smo-bg-alt:#f4f4f6; --smo-card:#ffffff; --smo-text:#161616; --smo-text-dim:#5c5c62; --smo-accent:#e53935; --smo-border:rgba(0,0,0,.08); } .smo-fancy { background:var(--smo-bg); color:var(--smo-text); transition:background-color .25s ease,color .25s ease; } .smo-fancy * { box-sizing:border-box; } .smo-fancy section { padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,4vw,2rem); max-width:1180px; margin:0 auto; } /* Hero */ .smo-fancy-hero { position:relative; min-height:80vh; display:flex; align-items:flex-end; overflow:hidden; max-width:none; padding:0; } .smo-fancy-hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .smo-fancy-hero__dim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,13,13,.35) 0%,rgba(13,13,13,.85) 100%); } html[data-smo-theme="light"] .smo-fancy-hero__dim { background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.92) 100%); } .smo-fancy-hero__content { position:relative; z-index:2; padding:clamp(2rem,6vw,4rem); max-width:760px; } .smo-fancy-hero__content h1 { font-size:clamp(2rem,5vw,3.4rem); line-height:1.1; margin:0 0 1rem; color:var(--smo-text); } .smo-fancy-hero__sub { font-size:clamp(1rem,1.6vw,1.15rem); color:var(--smo-text-dim); margin:0 0 1.75rem; max-width:640px; } html[data-smo-theme="light"] .smo-fancy-hero__content h1, html[data-smo-theme="light"] .smo-fancy-hero__sub { text-shadow:none; } .smo-fancy-hero__content h1, .smo-fancy-hero__sub { text-shadow:0 2px 12px rgba(0,0,0,.25); } /* Toggle */ .smo-theme-toggle { position:absolute; top:1.5rem; right:1.5rem; z-index:3; width:44px; height:44px; border-radius:50%; border:1px solid var(--smo-border); background:rgba(255,255,255,.08); backdrop-filter:blur(6px); color:var(--smo-text); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; } html[data-smo-theme="light"] .smo-theme-toggle { background:rgba(0,0,0,.06); } .smo-theme-toggle .smo-tt-icon { display:none; } html:not([data-smo-theme="light"]) .smo-theme-toggle .smo-tt-sun { display:block; } html[data-smo-theme="light"] .smo-theme-toggle .smo-tt-moon { display:block; } /* Buttons */ .smo-fancy-btn { display:inline-block; padding:.85rem 1.75rem; border-radius:999px; background:var(--smo-accent); color:#fff; text-decoration:none; font-weight:600; letter-spacing:.01em; transition:transform .15s ease,opacity .15s ease; } .smo-fancy-btn:hover { transform:translateY(-2px); opacity:.92; color:#fff; } .smo-fancy-btn--ghost { background:transparent; border:1px solid var(--smo-border); color:var(--smo-text); } /* Case carousel wrapper (Karten selbst bleiben bewusst dunkel-gestylt, siehe one-case-phones) */ .smo-fancy-cases { background:var(--smo-bg-alt); max-width:none; padding-top:2.5rem; padding-bottom:2.5rem; } /* one-case-phones setzt Label-Farbe hart auf #222 (fuer helle Enfold-Sections) -- auf unserem Dark-Theme-Hintergrund unlesbar, deshalb hier mit gleicher Spezifitaet ueberschrieben. */ #top .smo-fancy-cases .ocs-phone-label a { color:var(--smo-text) !important; } /* Pillars */ .smo-fancy-pillars__grid { display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .smo-fancy-pillar { background:var(--smo-card); border:1px solid var(--smo-border); border-radius:16px; padding:1.75rem; } .smo-fancy-pillar h3 { margin:0 0 .6rem; font-size:1.1rem; color:var(--smo-text); } .smo-fancy-pillar p { margin:0; color:var(--smo-text-dim); font-size:.95rem; line-height:1.55; } /* Stats */ .smo-fancy-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.5rem; background:var(--smo-bg-alt); max-width:none; padding-top:2.5rem; padding-bottom:2.5rem; } .smo-fancy-stat { text-align:center; } .smo-fancy-stat__value { display:block; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:var(--smo-accent); } .smo-fancy-stat__label { display:block; margin-top:.35rem; font-size:.85rem; color:var(--smo-text-dim); } /* Highlight */ .smo-fancy-highlight { display:flex; gap:clamp(1.5rem,4vw,3rem); align-items:center; flex-wrap:wrap; } .smo-fancy-highlight__phone { flex:0 0 auto; width:180px; } .smo-fancy-highlight__phone video { width:100%; border-radius:24px; display:block; } .smo-fancy-highlight__text { flex:1 1 320px; } .smo-fancy-highlight__text h2 { margin:0 0 .75rem; font-size:1.6rem; } .smo-fancy-highlight__text p { margin:0; color:var(--smo-text-dim); line-height:1.6; } /* Testimonial */ .smo-fancy-testimonial { text-align:center; max-width:760px; } .smo-fancy-testimonial blockquote { margin:0 0 1rem; font-size:clamp(1.2rem,2.4vw,1.6rem); font-style:italic; color:var(--smo-text); } .smo-fancy-testimonial__name { margin:0; font-weight:600; } .smo-fancy-testimonial__name span { display:block; font-weight:400; color:var(--smo-text-dim); font-size:.85rem; margin-top:.2rem; } /* CTA */ .smo-fancy-cta { text-align:center; } .smo-fancy-cta h2 { margin:0 0 1.5rem; font-size:clamp(1.5rem,3vw,2.1rem); } .smo-fancy-cta__actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } @media (max-width:600px) { .smo-fancy-hero { min-height:70vh; } .smo-fancy-highlight { flex-direction:column; text-align:center; } }