/* ============================================================ DIGITAGIOUS mobile / responsive fixes - working hamburger dropdown below 900px - slimmer, viewport-scaled marquee bands - founder image goes full-bleed on phones - readable text panel where content overlaps a photo ============================================================ */ /* --------------------------------------------------------- 1) NAVIGATION — inline links until 900px, then dropdown --------------------------------------------------------- */ #digi-burger { display: none; } @media (max-width: 899px) { /* Hide Squarespace's nav links + CTA wherever they live (there are copies in both the desktop and mobile header wrappers), plus its dead static burger. We deliberately DON'T toggle the display wrappers, so the logo stays. */ .header-nav, .header-actions, .header-burger-btn, .header-menu, .header-display-desktop .header-nav, .header-display-mobile .header-nav { display: none !important; } #digi-burger { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 14px; right: 16px; z-index: 100000; width: 46px; height: 46px; padding: 0; background: transparent; border: 0; cursor: pointer; } #digi-burger span { position: relative; width: 26px; height: 2px; background: #141118; transition: background .2s ease; } #digi-burger span::before, #digi-burger span::after { content: ""; position: absolute; left: 0; width: 26px; height: 2px; background: #141118; transition: transform .25s ease, top .25s ease; } #digi-burger span::before { top: -8px; } #digi-burger span::after { top: 8px; } /* animate to an X when open */ html.digi-menu-open #digi-burger span { background: transparent; } html.digi-menu-open #digi-burger span::before { top: 0; transform: rotate(45deg); } html.digi-menu-open #digi-burger span::after { top: 0; transform: rotate(-45deg); } #digi-mobmenu { position: fixed; inset: 0 0 auto 0; top: 0; z-index: 99999; background: rgba(255,255,255,.98); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 84px 26px 34px; transform: translateY(-102%); transition: transform .32s cubic-bezier(.4,0,.2,1); box-shadow: 0 18px 40px rgba(20,17,24,.14); display: flex; flex-direction: column; gap: 4px; } html.digi-menu-open #digi-mobmenu { transform: translateY(0); } html.digi-menu-open { overflow: hidden; } /* lock scroll while open */ #digi-mobmenu a { font-size: 1.35rem; font-weight: 600; color: #141118; text-decoration: none; padding: 15px 4px; border-bottom: 1px solid #ece9f3; } #digi-mobmenu a:last-child { border-bottom: 0; } #digi-mobmenu a.digi-cta { margin-top: 18px; background: #141118; color: #fff; text-align: center; border-radius: 40px; padding: 16px; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; border-bottom: 0; } #digi-mobmenu a.digi-cta:active { background: #7b2ff7; } } @media (min-width: 900px) { #digi-burger, #digi-mobmenu { display: none !important; } } /* --------------------------------------------------------- 2) MARQUEE BANDS — slimmer + scale with the viewport (applies to the three scrolling-text sections) --------------------------------------------------------- */ .Marquee, section[data-section-id="6a15f1c41821414540640440"] .Marquee, section[data-section-id="6a15f1c41821414540640449"] .Marquee, section[data-section-id="6a17fac9b3ae4760dbe04a83"] .Marquee { --digi-marquee-size: clamp(0.95rem, 3.8vw, 2.3rem); } /* high-specificity so it beats Squarespace's heading sizing on the marquee

*/ section[data-section-id="6a15f1c41821414540640440"] .Marquee-item, section[data-section-id="6a15f1c41821414540640440"] h1.Marquee-item--text, section[data-section-id="6a15f1c41821414540640440"] .Marquee-item *, section[data-section-id="6a15f1c41821414540640449"] .Marquee-item, section[data-section-id="6a15f1c41821414540640449"] h1.Marquee-item--text, section[data-section-id="6a15f1c41821414540640449"] .Marquee-item *, section[data-section-id="6a17fac9b3ae4760dbe04a83"] .Marquee-item, section[data-section-id="6a17fac9b3ae4760dbe04a83"] h1.Marquee-item--text, section[data-section-id="6a17fac9b3ae4760dbe04a83"] .Marquee-item * { font-size: var(--digi-marquee-size) !important; line-height: 1.05 !important; } /* band thickness scales with window width (thinner as it narrows) */ section[data-section-id="6a15f1c41821414540640440"], section[data-section-id="6a15f1c41821414540640449"], section[data-section-id="6a17fac9b3ae4760dbe04a83"] { padding-top: clamp(10px, 3.2vw, 34px) !important; padding-bottom: clamp(10px, 3.2vw, 34px) !important; } .Marquee, .Marquee-display { min-height: 0 !important; } /* clean CSS marquee replacement (built by digi-mobile.js): scales with the viewport and loops seamlessly, so the text never collides with itself */ .digi-marquee { overflow: hidden; width: 100%; } .digi-marquee-track { display: flex; width: max-content; white-space: nowrap; will-change: transform; animation: digi-marq 46s linear infinite; } .digi-marquee-seg { display: inline-block; font-weight: 700; line-height: 1.1; font-size: clamp(1rem, 3.6vw, 2.6rem); } @keyframes digi-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .digi-marquee-track { animation: none; } } /* the BOOK NOW / CTA button inside these bands scales with width too */ section[data-section-id="6a15f1c41821414540640440"] .sqs-block-button-element, section[data-section-id="6a15f1c41821414540640449"] .sqs-block-button-element, section[data-section-id="6a17fac9b3ae4760dbe04a83"] .sqs-block-button-element { font-size: clamp(.66rem, 2.5vw, .9rem) !important; padding: clamp(8px, 2.2vw, 15px) clamp(18px, 5vw, 38px) !important; letter-spacing: .04em; line-height: 1.1 !important; } /* tighten the button block + row gaps so the whole band gets thinner */ section[data-section-id="6a15f1c41821414540640440"] .sqs-block-button, section[data-section-id="6a15f1c41821414540640449"] .sqs-block-button, section[data-section-id="6a17fac9b3ae4760dbe04a83"] .sqs-block-button { padding-top: clamp(6px, 2vw, 16px) !important; padding-bottom: 0 !important; } /* --------------------------------------------------------- 3) FOUNDER SLIDE ("Hi I'm Coralynn") — match the wireframe slide: keep the founder photo as the section BACKGROUND (always visible) and lay the text over it in the same readable panel. The image is never split out from the text. --------------------------------------------------------- */ @media (max-width: 991px) { /* keep the founder photo as an always-on cover background */ section[data-section-id="6a15f1c41821414540640450"] .section-background { display: block !important; opacity: 1 !important; visibility: visible !important; } section[data-section-id="6a15f1c41821414540640450"] .section-background img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; } /* hide the separate/duplicate content photo so it isn't split from the text */ section[data-section-id="6a15f1c41821414540640450"] .fe-block-yui_3_17_2_1_1780960452427_15981 { display: none !important; } /* stack the founder blocks in normal order so the "DIGITAGIOUS Founder" label no longer overlaps the "HI I'M CORALYNN!" heading (the layout engine places them in overlapping grid rows by default) */ section[data-section-id="6a15f1c41821414540640450"] .fluid-engine { display: flex !important; flex-direction: column !important; gap: 14px !important; } section[data-section-id="6a15f1c41821414540640450"] .fluid-engine > .fe-block { grid-row: auto !important; grid-column: auto !important; width: 100% !important; margin: 0 !important; } /* founder copy sits in the SAME readable panel as the wireframe slide */ section[data-section-id="6a15f1c41821414540640450"] .sqs-block-html .sqs-block-content { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 16px; padding: 16px 18px !important; box-shadow: 0 8px 30px rgba(20,17,24,.10); /* hug the text instead of spanning the full width */ width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; } } /* --------------------------------------------------------- 4) READABLE TEXT over the photo ("Not only for beginners") give the copy block a solid panel so it never fights the image --------------------------------------------------------- */ section[data-section-id="6a17672e43fece4a84858ec2"] .sqs-html-content, section[data-section-id="6a17672e43fece4a84858ec2"] .sqs-block-html .sqs-block-content { color: #141118; } @media (max-width: 991px) { section[data-section-id="6a17672e43fece4a84858ec2"] .sqs-block-html .sqs-block-content { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 16px; padding: 22px 20px !important; box-shadow: 0 8px 30px rgba(20,17,24,.10); } } /* ========================================================= ABOUT PAGE ========================================================= */ :root { --about-purple: #d8d3f7; } /* 1) hero / "Why I built" section -> purple background */ section[data-section-id="6a28700cc5ce9522685fee27"], section[data-section-id="6a28700cc5ce9522685fee27"] .section-background { background: var(--about-purple) !important; } /* 2) "Why I built" copy wrapped in a white card (grouped by digi-mobile.js) */ .about-why-card { background: #fff; border-radius: 20px; padding: 30px 34px; box-shadow: 0 14px 44px rgba(20,17,24,.10); align-self: center; position: relative; /* lift above the section's decorative shape SVG */ z-index: 6; } .about-why-card .fe-block { opacity: 1 !important; transform: none !important; } .about-why-card .fe-block + .fe-block { margin-top: 6px; } @media (min-width: 768px) { .about-why-card { grid-column: 3 / 13 !important; grid-row: 2 / 15 !important; } } @media (max-width: 767px) { .about-why-card { grid-column: 1 / -1 !important; grid-row: auto !important; margin: 0 4vw; } } /* 3) pink "Who is for" section -> wavy (sine) top edge instead of a straight one */ section[data-section-id="6a2872437a29f875b44c0f2a"] { position: relative; } section[data-section-id="6a2872437a29f875b44c0f2a"]::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(36px, 6vw, 70px); z-index: 3; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V30 C1000,72 800,2 600,32 C400,62 200,0 0,32 Z' fill='%23d8d3f7'/%3E%3C/svg%3E") no-repeat top center; background-size: 100% 100%; } /* ========================================================= TEXT PAGES — lavender background (like workshops / home) The section-background layer wasn't painting on these pages, so set the section's own background directly. ========================================================= */ section[data-section-id="6a15f1c41821414540640428"], /* contact */ section[data-section-id="6a17fcc84707152678e336e9"], /* disclaimer (AI disclaimer) */ section[data-section-id="6a17fb3ab2793150ebef77cd"], /* imprint */ section[data-section-id="6a15f1c41821414540640469"] { /* privacy policy */ background: #d1d1ff !important; } /* ========================================================= HOME — "What is DIGITAGIOUS about?" : make the 3 cards equal size ========================================================= */ @media (min-width: 768px) { /* "Meet you where you are" spanned fewer grid rows than the others */ section[data-section-id="6a16f13fcdd0b32a988c4b91"] .fe-block-4d01345f24d4bebc16ca { grid-row: 7 / 14 !important; } } /* let each card's bordered box fill its cell so all three match height */ section[data-section-id="6a16f13fcdd0b32a988c4b91"] .fe-block-d08f164f5d7f42501b13 .sqs-block, section[data-section-id="6a16f13fcdd0b32a988c4b91"] .fe-block-4d01345f24d4bebc16ca .sqs-block, section[data-section-id="6a16f13fcdd0b32a988c4b91"] .fe-block-a9db698a4ec059bdd8b4 .sqs-block { height: 100% !important; }