/* ===================================================== DJ Janis Hopfer – Stylesheet Plattform: Netlify (statisch) ===================================================== */ /* --- Variablen ---------------------------------------- */ :root { --bg: #0c0c0c; --bg-2: #141414; --bg-card: #1a1a1a; --bg-card-2: #1f1f1f; --accent: #f0f0f0; --accent-h: #ffffff; --text: #f0f0f0; --text-muted: #888; --text-dim: #555; --border: #252525; --border-2: #2e2e2e; --radius: 8px; --radius-lg: 16px; --shadow: 0 4px 24px rgba(0,0,0,.55); --shadow-lg: 0 8px 48px rgba(0,0,0,.7); --transition: .25s ease; --max-w: 1160px; --nav-h: 72px; --font: 'Inter', system-ui, sans-serif; } /* --- Reset ------------------------------------------- */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { display:block; max-width:100%; height:auto; } a { color:inherit; text-decoration:none; } ul { list-style:none; } /* --- Google Font Preconnect (in ) -------------- */ /* --- Utility ----------------------------------------- */ .container { max-width:var(--max-w); margin:0 auto; padding:0 24px; } .text-accent { color:var(--accent); } .tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } .section-title { font-size:clamp(1.8rem, 4vw, 2.8rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; } .section-sub { font-size:1.05rem; color:var(--text-muted); max-width:560px; margin-top:12px; line-height:1.7; } .divider { width:48px; height:3px; background:var(--accent); border-radius:2px; margin:16px 0; } /* --- Buttons ----------------------------------------- */ .btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:var(--radius); font-weight:700; font-size:.95rem; letter-spacing:.02em; cursor:pointer; transition:var(--transition); border:none; } .btn-primary { background:var(--accent); color:#0c0c0c; } .btn-primary:hover { background:var(--accent-h); transform:translateY(-2px); box-shadow:0 6px 24px rgba(201,150,58,.35); } .btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--border-2); } .btn-outline:hover { border-color:var(--accent); color:var(--accent); } /* --- Navigation -------------------------------------- */ .nav { position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000; transition:background var(--transition), box-shadow var(--transition); } .nav.scrolled { background:rgba(12,12,12,.96); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--border); } .nav-inner { max-width:var(--max-w); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; } .nav-logo img { height:40px; width:auto; filter:invert(1); } .nav-links { display:flex; align-items:center; gap:32px; } .nav-links a { font-size:.88rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); transition:color var(--transition); } .nav-links a:hover { color:var(--text); } .nav-links .dropdown { position:relative; } .nav-links .dropdown > span { font-size:.88rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; gap:5px; transition:color var(--transition); } .nav-links .dropdown:hover > span { color:var(--text); } .dropdown-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:8px; padding-top:20px; /* includes visual gap as padding so hover doesn't break */ min-width:180px; opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition); box-shadow:var(--shadow); } .nav-links .dropdown:hover .dropdown-menu { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); } .dropdown-menu a { display:block; padding:10px 14px; border-radius:6px; font-size:.88rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); transition:background var(--transition), color var(--transition); } .dropdown-menu a:hover { background:var(--bg-card-2); color:var(--text); } .nav-cta { margin-left:8px; padding:10px 20px; font-size:.85rem; } /* Hamburger */ .nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; } .nav-burger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:var(--transition); } .nav-mobile { display:none; position:fixed; inset:0; background:var(--bg); z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:32px; } .nav-mobile.open { display:flex; } .nav-mobile a, .nav-mobile button { font-size:1.5rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); background:none; border:none; cursor:pointer; transition:color var(--transition); } .nav-mobile a:hover { color:var(--accent); } .nav-mobile-close { position:absolute; top:24px; right:24px; background:none; border:none; cursor:pointer; color:var(--text); font-size:1.5rem; } /* --- Hero -------------------------------------------- */ .hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; } .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 8s ease; } .hero-bg.loaded { transform:scale(1); } .hero-overlay { position:absolute; inset:0; background:linear-gradient( 135deg, rgba(12,12,12,.88) 0%, rgba(12,12,12,.6) 60%, rgba(12,12,12,.82) 100% ); } .hero-content { position:relative; z-index:2; padding-top:var(--nav-h); padding-bottom:80px; } .hero-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:20px; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); } .hero-eyebrow::before { content:''; display:block; width:32px; height:2px; background:var(--accent); flex-shrink:0; } .hero-title { font-size:clamp(2.8rem, 6.5vw, 5rem); font-weight:900; letter-spacing:-.03em; line-height:1.08; margin-bottom:20px; max-width:700px; } .hero-sub { font-size:1.15rem; color:rgba(240,240,240,.7); max-width:520px; line-height:1.7; margin-bottom:36px; } .hero-btns { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:56px; } .hero-stats { display:flex; flex-wrap:wrap; gap:32px; padding-top:32px; border-top:1px solid rgba(255,255,255,.08); } .hero-stat-num { font-size:2rem; font-weight:900; color:var(--accent); letter-spacing:-.02em; line-height:1; } .hero-stat-label { font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; } .hero-scroll { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-dim); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; animation:bounce 2s infinite; } .hero-scroll svg { width:18px; height:18px; } @keyframes bounce { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(6px); } } /* --- Foto-Galerie ------------------------------------ */ .photo-gallery { padding:80px 0; background:var(--bg); } .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:260px; gap:10px; margin-top:36px; } .gallery-item { overflow:hidden; border-radius:var(--radius); background:var(--bg-card); } .gallery-item.tall { grid-row:span 2; } .gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .gallery-item:hover img { transform:scale(1.06); } @media(max-width:720px) { .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; } .gallery-item.tall { grid-row:span 1; } } /* --- Über mich --------------------------------------- */ .about { padding:100px 0; } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .about-img-wrap { position:relative; border-radius:var(--radius-lg); overflow:hidden; } .about-img-wrap::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); border-radius:inherit; pointer-events:none; } .about-img-wrap img { width:100%; aspect-ratio:4/5; object-fit:cover; } .about-accent-box { position:absolute; bottom:-20px; right:-20px; background:var(--accent); color:#0c0c0c; padding:20px 24px; border-radius:var(--radius); font-weight:900; font-size:1.4rem; line-height:1.1; text-align:center; } .about-accent-box small { display:block; font-size:.72rem; font-weight:700; opacity:.8; } .about-text { } .about-text p { color:rgba(240,240,240,.75); margin-bottom:16px; font-size:1.02rem; } .about-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .badge { background:var(--bg-card); border:1px solid var(--border-2); border-radius:20px; padding:7px 16px; font-size:.82rem; font-weight:600; color:var(--text-muted); } /* --- Services Overview ------------------------------- */ .services { padding:80px 0 100px; background:var(--bg-2); } .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; } .service-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-card); border:1px solid var(--border); transition:transform var(--transition), box-shadow var(--transition); display:flex; flex-direction:column; } .service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); } .service-card-img { height:240px; overflow:hidden; position:relative; } .service-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .service-card:hover .service-card-img img { transform:scale(1.05); } .service-card-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(26,26,26,1) 0%, transparent 60%); } .service-card-body { padding:24px; flex:1; display:flex; flex-direction:column; } .service-card-label { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .service-card-title { font-size:1.4rem; font-weight:800; margin-bottom:10px; letter-spacing:-.01em; } .service-card-text { font-size:.9rem; color:var(--text-muted); line-height:1.65; flex:1; margin-bottom:20px; } .service-card-link { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:var(--accent); transition:gap var(--transition); } .service-card-link:hover { gap:10px; } /* --- Testimonials ------------------------------------ */ .testimonials { padding:100px 0; } .testimonials-header { max-width:600px; margin-bottom:56px; } .testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; position:relative; } .testimonial-quote { font-size:3rem; line-height:1; color:var(--accent); opacity:.4; font-family:Georgia, serif; margin-bottom:12px; } .testimonial-text { font-size:.96rem; color:rgba(240,240,240,.8); line-height:1.7; margin-bottom:20px; font-style:italic; } .testimonial-meta { display:flex; align-items:center; gap:12px; } .testimonial-avatar { width:42px; height:42px; border-radius:50%; background:var(--bg-card-2); border:2px solid var(--border-2); display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:800; color:var(--accent); flex-shrink:0; } .testimonial-name { font-weight:700; font-size:.9rem; } .testimonial-event { font-size:.78rem; color:var(--text-muted); } .testimonial-stars { display:flex; gap:3px; color:var(--accent); font-size:.85rem; margin-bottom:14px; } /* --- FAQ --------------------------------------------- */ .faq { padding:100px 0; background:var(--bg-2); } .faq-grid { display:grid; grid-template-columns:1fr 2fr; gap:64px; margin-top:0; } .faq-sticky { position:sticky; top:calc(var(--nav-h) + 24px); align-self:start; } .faq-list { margin-top:0; } .faq-item { border-bottom:1px solid var(--border); } .faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-weight:600; font-size:1rem; cursor:pointer; list-style:none; transition:color var(--transition); } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary:hover { color:var(--accent); } .faq-item[open] summary { color:var(--accent); } .faq-icon { width:24px; height:24px; border:1.5px solid var(--border-2); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--transition); } .faq-item[open] .faq-icon { background:var(--accent); border-color:var(--accent); color:#0c0c0c; } .faq-answer { padding:0 0 20px; font-size:.95rem; color:var(--text-muted); line-height:1.75; } /* --- Kontakt ----------------------------------------- */ .contact { padding:100px 0; } .contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start; } .contact-info h2 { margin-bottom:12px; } .contact-info p { color:var(--text-muted); margin-bottom:32px; line-height:1.7; } .contact-detail { display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:.95rem; } .contact-icon { width:40px; height:40px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent); font-size:1rem; } .contact-detail a:hover { color:var(--accent); transition:color var(--transition); } .social-links { display:flex; gap:12px; margin-top:32px; } .social-link { width:44px; height:44px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; transition:var(--transition); font-size:1.1rem; } .social-link:hover { background:var(--accent); border-color:var(--accent); color:#0c0c0c; } /* Form */ .contact-form-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; } .contact-form-wrap h3 { font-size:1.2rem; font-weight:700; margin-bottom:24px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .form-group { margin-bottom:14px; } .form-group label { display:block; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; } .form-group input, .form-group select, .form-group textarea { width:100%; background:var(--bg-card-2); border:1.5px solid var(--border-2); border-radius:var(--radius); padding:12px 14px; color:var(--text); font-family:var(--font); font-size:.95rem; transition:border-color var(--transition); outline:none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent); } .form-group select { cursor:pointer; } .form-group select option { background:var(--bg-card); } .form-group textarea { resize:vertical; min-height:110px; } .form-submit { margin-top:8px; width:100%; justify-content:center; padding:15px; font-size:1rem; } .form-note { text-align:center; font-size:.78rem; color:var(--text-dim); margin-top:12px; } .form-success { display:none; text-align:center; padding:32px; color:var(--accent); } /* --- Video Section ----------------------------------- */ .video-section { padding:80px 0; background:var(--bg-2); } .video-wrap { position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; margin-top:40px; background:var(--bg-card); border:1px solid var(--border); } .video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; } .video-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--text-muted); } .video-play-btn { width:72px; height:72px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#0c0c0c; font-size:1.5rem; cursor:pointer; transition:transform var(--transition); } .video-play-btn:hover { transform:scale(1.08); } /* --- Footer ------------------------------------------ */ .footer { padding:56px 0 32px; border-top:1px solid var(--border); } .footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:40px; } .footer-brand img { height:36px; margin-bottom:16px; } .footer-brand p { font-size:.9rem; color:var(--text-muted); line-height:1.7; max-width:280px; } .footer-col h4 { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; } .footer-col li + li { margin-top:8px; } .footer-col a { font-size:.9rem; color:var(--text-muted); transition:color var(--transition); } .footer-col a:hover { color:var(--accent); } .footer-bottom { padding-top:28px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--text-dim); } .footer-bottom a { color:var(--text-dim); } .footer-bottom a:hover { color:var(--accent); } /* --- Inhaltsseiten (Hochzeit, Events, Clubs) --------- */ .page-hero { position:relative; overflow:hidden; padding:calc(var(--nav-h) + 60px) 0 60px; background:var(--bg-2); border-bottom:1px solid var(--border); } /* Blurred photo background variant */ .page-hero-bg { position:absolute; inset:-12px; background-size:cover; background-position:center; filter:blur(4px); } .page-hero-overlay { position:absolute; inset:0; background:rgba(12,12,12,.80); } .page-hero .container { position:relative; z-index:2; } .page-hero-photo p { color:rgba(240,240,240,.78); } .page-hero .tag { font-size:.75rem; } .page-hero h1 { font-size:clamp(2rem, 5vw, 3.6rem); font-weight:900; letter-spacing:-.025em; line-height:1.1; max-width:700px; margin-bottom:16px; } .page-hero p { font-size:1.05rem; color:var(--text-muted); max-width:560px; line-height:1.7; margin-bottom:28px; } .page-section { padding:72px 0; } .page-section + .page-section { border-top:1px solid var(--border); } .page-section.bg-alt { background:var(--bg-2); } .feature-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:36px; } .feature-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; } .feature-icon { font-size:1.5rem; margin-bottom:12px; } .feature-item h3 { font-size:1rem; font-weight:700; margin-bottom:6px; } .feature-item p { font-size:.88rem; color:var(--text-muted); line-height:1.65; } .steps-list { margin-top:36px; } .step { display:flex; gap:20px; margin-bottom:32px; } .step-num { flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#0c0c0c; font-weight:900; font-size:.9rem; display:flex; align-items:center; justify-content:center; margin-top:2px; } .step-content h3 { font-weight:700; margin-bottom:6px; } .step-content p { font-size:.93rem; color:var(--text-muted); line-height:1.65; } .cta-banner { background:linear-gradient(135deg, #1a1a1a 0%, #1e1a11 100%); border:1px solid var(--accent); border-radius:var(--radius-lg); padding:48px; text-align:center; margin-top:40px; } .cta-banner h2 { font-size:1.8rem; margin-bottom:10px; } .cta-banner p { color:var(--text-muted); margin-bottom:24px; } /* --- Impressum / Datenschutz ------------------------- */ .legal-page { padding:calc(var(--nav-h) + 60px) 0 80px; } .legal-page h1 { font-size:2.2rem; font-weight:800; margin-bottom:40px; } .legal-page h2 { font-size:1.2rem; font-weight:700; margin:32px 0 10px; color:var(--text); } .legal-page p, .legal-page li { font-size:.95rem; color:var(--text-muted); line-height:1.75; margin-bottom:8px; } .legal-page a { color:var(--accent); } .legal-page a:hover { text-decoration:underline; } /* --- Cookie-Consent-Banner --------------------------- */ #cookie-consent-banner { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%); z-index:9999; width:calc(100% - 48px); max-width:700px; background:var(--bg-card); border:1px solid var(--border-2); border-radius:var(--radius-lg); box-shadow:0 12px 56px rgba(0,0,0,.75); transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease; opacity:0; } #cookie-consent-banner.ccb-visible { transform:translateX(-50%) translateY(0); opacity:1; } #cookie-consent-banner.ccb-hide { transform:translateX(-50%) translateY(120%); opacity:0; } .ccb-inner { padding:24px 28px 20px; } .ccb-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:8px; } .ccb-text { font-size:.85rem; color:var(--text-muted); line-height:1.65; margin-bottom:18px; } .ccb-link { color:var(--accent); text-decoration:underline; } .ccb-cats { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; } .ccb-cat { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--bg-card-2); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; } .ccb-cat-text { display:flex; flex-direction:column; gap:3px; } .ccb-cat-name { font-size:.88rem; font-weight:700; color:var(--text); } .ccb-cat-desc { font-size:.78rem; color:var(--text-muted); line-height:1.5; } .ccb-always { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); white-space:nowrap; flex-shrink:0; } /* Toggle switch */ .ccb-toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; } .ccb-toggle input { opacity:0; width:0; height:0; position:absolute; } .ccb-slider { display:block; width:44px; height:24px; background:var(--border-2); border-radius:12px; transition:background .2s ease; position:relative; } .ccb-slider::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .2s ease; } .ccb-toggle input:checked + .ccb-slider { background:var(--accent); } .ccb-toggle input:checked + .ccb-slider::after { transform:translateX(20px); } .ccb-toggle input:focus-visible + .ccb-slider { outline:2px solid var(--accent); outline-offset:2px; } /* Footer buttons */ .ccb-footer { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; } .ccb-btn-secondary { background:transparent; border:1.5px solid var(--border-2); color:var(--text-muted); border-radius:var(--radius); padding:10px 20px; font-size:.88rem; font-weight:600; cursor:pointer; font-family:var(--font); transition:var(--transition); } .ccb-btn-secondary:hover { border-color:var(--accent); color:var(--accent); } .ccb-btn-primary { background:var(--accent); border:none; color:#0c0c0c; border-radius:var(--radius); padding:10px 24px; font-size:.88rem; font-weight:700; cursor:pointer; font-family:var(--font); transition:var(--transition); } .ccb-btn-primary:hover { background:#fff; } @media (max-width:520px) { #cookie-consent-banner { bottom:0; width:100%; border-radius:var(--radius-lg) var(--radius-lg) 0 0; } #cookie-consent-banner.ccb-visible { transform:translateX(-50%) translateY(0); } #cookie-consent-banner.ccb-hide { transform:translateX(-50%) translateY(100%); } .ccb-footer { flex-direction:column; } .ccb-btn-primary, .ccb-btn-secondary { width:100%; text-align:center; justify-content:center; } } /* --- Responsive -------------------------------------- */ @media (max-width: 900px) { .nav-links { display:none; } .nav-burger { display:flex; } .about-grid, .contact-grid, .faq-grid, .footer-inner { grid-template-columns:1fr; gap:40px; } .services-grid, .testimonials-grid { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; } .about-img-wrap { max-width:420px; } .about-accent-box { bottom:-12px; right:-12px; } .feature-grid { grid-template-columns:1fr; } .cta-banner { padding:32px 24px; } .footer-inner { grid-template-columns:1fr 1fr; } .faq-sticky { position:static; } } @media (max-width: 720px) { .instagram-card { grid-template-columns: 1fr !important; } .instagram-card-img { min-height: 220px !important; } } @media (max-width: 600px) { .container { padding:0 18px; } .hero { align-items:flex-start; } .hero-content { padding-top:calc(var(--nav-h) + 40px); } .hero-title { font-size:2.4rem; } .hero-btns { flex-direction:column; align-items:flex-start; } .hero-stats { gap:20px; } .footer-inner { grid-template-columns:1fr; } .contact-form-wrap { padding:24px; } }