#fw-section-custom-html-a0da3632-ee0f-4136-bedf-67baf4739b8f { /* SCOPE ONLY — NO RESET */ .vansta-issues { --heading-font: 'Boldonse', sans-serif; font-family: 'Poppins', sans-serif; } /* ========================= PAGE LAYOUT ========================= */ .vansta-issues .issues-page { max-width: 100%; margin: 0; padding: 70px 5% 60px 5%; background-color: #161616 !important; color: #ffffff; display: flex; flex-direction: column; align-items: flex-start; min-height: 100vh; } /* ========================= HEADINGS ========================= */ .vansta-issues .issues-main-title { font-family: var(--heading-font) !important; font-weight: 700 !important; color: #ffa0c8 !important; font-size: 64px !important; margin: 0 0 25px 0 !important; text-transform: uppercase; letter-spacing: 0.02em !important; } .vansta-issues .issues-subtitle { max-width: 800px; font-size: 18px; margin-bottom: 40px; } /* ========================= FEATURED ========================= */ .vansta-issues .featured-issue { width: 100%; display: grid; grid-template-columns: 500px 1fr; gap: 60px; align-items: center; margin-bottom: 20px; } .vansta-issues .featured-label-wrapper { grid-column: 1 / -1; } .vansta-issues .featured-label { display: inline-block !important; width: fit-content !important; background: #ffa0c8; color: #161616; padding: 4px 12px; font-weight: 800; font-size: 11px; letter-spacing: 1.5px; margin-bottom: 10px; text-transform: uppercase; } .vansta-issues .featured-meta h2 { font-family: var(--heading-font) !important; font-weight: 700 !important; color: #ffa0c8 !important; font-size: 48px !important; margin: 0; text-transform: uppercase; letter-spacing: 0.02em !important; } .vansta-issues .featured-date { font-size: 18px; opacity: 0.8; margin-top: 5px; } .line-break { width: auto; max-width: auto; height: 2px; background: #2a2a2a; margin-right: -35vw; } /* ========================= ARCHIVE GRID ========================= */ .vansta-issues .issues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 70px 45px; width: 100%; } @media (min-width: 1024px) { .vansta-issues .issues-grid { grid-template-columns: repeat(3, 1fr); } } .vansta-issues .archive-item h3 { font-family: var(--heading-font) !important; font-weight: 700 !important; color: #ffa0c8; font-size: 24px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.02em !important; } /* ========================= COVER + HOVER ========================= */ .vansta-issues .embed-container { width: 100%; overflow: hidden; position: relative; } .vansta-issues .embed-container img { width: 100%; display: block; cursor: pointer; transition: transform 0.3s ease; } .vansta-issues .embed-container:hover img { transform: scale(1.03); } .vansta-issues .cover-trigger::after { content: "Click to Read Issue"; position: absolute; inset: 0; background: rgba(0,0,0,0.65); color: #ffa0c8; font-weight: 800; font-size: 14px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; opacity: 0; transition: opacity 0.25s ease; } .vansta-issues .embed-container:hover::after { opacity: 1; } /* ========================= FILTER BUTTONS ========================= */ .vansta-issues .order-toggle { margin-bottom: 45px; display: flex; gap: 15px; } .vansta-issues .order-toggle label { cursor: pointer; padding: 12px 30px; border: 2px solid #ffa0c8; border-radius: 8px; font-size: 14px; font-weight: 800; text-transform: uppercase; color: #ffa0c8; background: transparent; transition: all 0.2s ease; user-select: none; } .vansta-issues .order-toggle label:hover { background: rgba(255, 160, 200, 0.12); } .vansta-issues .order-toggle label.active { background: #ffa0c8; color: #161616; } /* ========================= MODAL ========================= */ .vansta-issues #reader-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 100000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .vansta-issues #reader-modal.active { opacity: 1; pointer-events: all; } .vansta-issues #reader-frame { width: 90%; height: 90%; border: none; border-radius: 8px; } .vansta-issues #close-reader { position: absolute; top: 20px; right: 30px; background: none; border: none; font-size: 32px; color: white; cursor: pointer; } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { .vansta-issues .issues-main-title { font-family: var(--heading-font) !important; font-size: 50px !important; line-height: 1.3; } .vansta-issues .featured-issue { grid-template-columns: 1fr; gap: 20px; } .line-break { width: 100%; max-width: auto; height: 2px; background: #2a2a2a; } .vansta-issues .featured-meta h2 { font-family: var(--heading-font) !important; font-size: 32px !important; } .vansta-issues .issues-grid { grid-template-columns: 1fr; } } } #fw-section-rich-text-ce6ade47-74ab-4c90-a814-2cb4910f2ef0 { /* ========================= VANSTA RICH TEXT HEADER (FORCE OVERRIDE VERSION) ========================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 { background-color: #161616 !important; } /* ========================= MAIN HEADING (COVERS ALL POSSIBLE STRUCTURES) ========================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h1, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h2, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h3, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__heading, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__title { color: #ff9fca !important; font-size: clamp(2.5rem, 6vw, 5rem) !important; line-height: 1.1 !important; text-transform: uppercase; margin: 0 0 20px 0 !important; } /* ========================= BODY / INTRO TEXT ========================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 p, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .intro, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__text { color: #ff9fca !important; font-size: 18px; max-width: 800px; opacity: 0.85; } /* ========================= WRAPPER CLEANUP ========================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__inner { background-color: #161616 !important; padding: 0 !important; } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h1, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h2, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__heading { font-size: 2rem !important; line-height: 1.2 !important; } #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 p, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .intro { font-size: 16px; } } } #fw-section-custom-html-b5ef771a-8c8e-4019-bde7-298d04c4d450 { html, body { margin: 0; padding: 0; background: #161616 !important; } /* ========================= WRAPPER ========================= */ .vansta-archive { font-family: 'Poppins', sans-serif; background: #161616; color: #d0d0d0; padding: 70px 5% 60px; min-height: 100vh; } /* ========================= TITLE ========================= */ .archive-title { font-family: var(--heading-font) !important; color: #ff9fca !important; font-size: 64px; margin: 0; text-transform: uppercase; } .archive-intro { max-width: 800px; font-size: 18px; opacity: 0.9; } /* ========================= LINE ========================= */ .line-break { height: 2px; background: #2a2a2a; margin: 25px 0 35px; } /* ========================= TAGS ========================= */ .tag-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 35px; } .tag { border: 2px solid #ff9fca; background: transparent; color: #ff9fca; padding: 10px 18px; text-transform: uppercase; font-size: 12px; cursor: pointer; } .tag.active { background: #ff9fca; color: #161616; } /* ========================= GRID ========================= */ .archive-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; } /* ========================= CARD ========================= */ .archive-item { background: #0f0f0f; position: relative; overflow: hidden; cursor: pointer; } .archive-item img { width: 100%; height: 480px; object-fit: cover; } /* ========================= META ========================= */ .meta { position: absolute; bottom: 0; padding: 22px; } .meta h2 { color: #ff9fca; font-size: 22px; } .meta p { font-size: 13px; } .author { font-size: 11px; opacity: 0.6; } /* ========================= READER ========================= */ .reader { position: fixed; inset: 0; background: rgba(22,22,22,0.97); display: none; z-index: 9999999; overflow-y: auto; padding: 120px 20px 80px; } .reader.active { display: block; } body.no-scroll { overflow: hidden; } .reader-inner { max-width: 850px; margin: auto; } /* ========================= CLOSE (FIXED FOR NAVBAR) ========================= */ .close { position: fixed; top: 100px; right: 25px; font-size: 40px; color: #ff9fca; cursor: pointer; z-index: 99999999; } /* ========================= READER TEXT ========================= */ #rTitle { font-family: var(--heading-font) !important; color: #ff9fca; font-size: 44px; text-transform: uppercase; } #rMeta { opacity: 0.6; margin-bottom: 45px; } /* ========================= CONTENT ========================= */ #readerContent img { width: 100%; margin: 30px 0; } iframe { width: 100%; height: 480px; margin: 40px 0; border: none; } #readerContent p { font-size: 15px; line-height: 1.8; } /* ========================= SUBHEADINGS ========================= */ .subheading { color: #ff9fca; font-size: 24px; margin: 50px 0 15px; text-transform: uppercase; } /* ========================= QUOTES ========================= */ blockquote { font-size: 26px; color: #ff9fca; border-left: 3px solid #ff9fca; padding-left: 18px; margin: 60px 0; font-style: italic; } /* ========================= QA ========================= */ .qa-speaker { color: #ff9fca; font-weight: 700; } /* ========================= BUTTON ========================= */ .share-btn { border: 2px solid #ff9fca; background: transparent; color: #ff9fca; padding: 10px 16px; text-transform: uppercase; cursor: pointer; } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { .archive-title { font-size: 42px; } .archive-list { grid-template-columns: 1fr; } iframe { height: 260px; } #rTitle { font-size: 32px; } } } #fw-section-custom-html-412c3ddf-1ed5-4f1f-8217-81440c03291f { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; .vansta-support { padding: 40px 20px; max-width: 1000px; margin-left: 20px; font-family: Poppins, sans-serif; background: #161616; color: #d0d0d0; } .intro { max-width: 650px; margin-bottom: 25px; } .support-list { display: flex; flex-direction: column; gap: 25px; } .support-item h2 { color: #ffa0c8; font-size: 16px; margin-bottom: 10px; } .support-item p { font-size: 13px; opacity: 0.85; margin-bottom: 10px; max-width: 70ch; } .callout { border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 15px 0; } .highlight { color: #ffa0c8; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .card { border: 1px solid rgba(255,255,255,0.08); padding: 16px; } .card .title { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .card p { font-size: 13px; opacity: 0.85; } .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .cta-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .cta-card h3 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .cta-card p { font-size: 13px; opacity: 0.9; } .cta-card.paid { background: #ffa0c8; color: #161616; } .cta-card.paid h3, .cta-card.paid p { color: #161616; } .cta-card.free { border: 1px solid rgba(255,255,255,0.08); } .btn { display: inline-block; margin-top: 10px; padding: 10px 14px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; } .btn.dark { background: #161616; color: #ffa0c8; } .btn.light { background: #ffa0c8; color: #161616; } @media (max-width: 768px) { .vansta-support { margin-left: 0; } .support-grid, .cta-grid { grid-template-columns: 1fr; } } } #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 { /* ========================================================= VANSTA — SUPPORT PAGE HEADER ========================================================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; } #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__inner { background-color: #161616; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__heading { color: #ff9fca !important; font-size: clamp(2.5rem, 6vw, 5rem) !important; box-sizing: border-box !important; } /* ========================================================= INTRO ========================================================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .intro { color: #ff9fca; } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 650px) { /* Section */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* Section content */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ======================================================= MAIN MOBILE HEADING ======================================================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__heading, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h1, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h2 { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; /* Responsive size. This prevents "SUPPORT" from exceeding the actual phone width. */ font-size: 9vw !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; white-space: normal !important; overflow: visible !important; overflow-wrap: normal !important; word-break: normal !important; } /* ======================================================= INTRO TEXT ======================================================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .intro { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } } } #fw-section-custom-html-c35336fd-b291-4f33-a1a1-4a4dd3739b58 { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; } #fw-section-text-blocks-08c1969d-698c-4433-ba41-2e8d1da932dc { --font-heading-scale: 1.1; --font-body-scale: 0.95; } #fw-section-text-blocks-08c1969d-698c-4433-ba41-2e8d1da932dc { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; /* --- THE "PERFECT ALIGNMENT" GRID REBUILD --- */ /* 1. THE WRAPPER: SNAPPED TO 5% LEFT + VERTICAL PADDING */ .text-blocks .wrapper { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 5% !important; padding-right: 5% !important; /* Added Vertical Padding here */ padding-top: 40px !important; padding-bottom: 40px !important; display: block !important; } /* 2. THE GRID: 3 EXACT SLOTS */ .text-blocks .col-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 40px !important; width: 100% !important; justify-items: start !important; justify-content: start !important; } /* 3. THE COLUMNS: NO SQUISH, NO CENTER + INTERNAL PADDING */ .text-blocks__item { width: 100% !important; max-width: 100% !important; margin: 0 !important; /* Added Internal Vertical Padding so text doesn't hit the top/bottom */ padding-top: 20px !important; padding-bottom: 20px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; border: 1px solid #161616 !important; background: transparent !important; } /* 4. CONTENT & PADDING FIX */ .text-blocks__item-content { width: 100% !important; padding: 0 !important; border: 1px solid #161616 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* 5. TEXT BREATHING ROOM & TYPOGRAPHY */ .text-blocks__title { font-family: var(--heading-font) !important; color: #ffa0c8 !important; font-size: 28px !important; line-height: 1.1 !important; margin-bottom: 15px !important; text-align: left !important; } .text-blocks__text, .text-blocks__text p { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; line-height: 1.7 !important; text-align: left !important; margin-top: 0 !important; } /* 6. TOP LABEL (The Shop, Profit, etc) */ .text-blocks__top-text { font-family: 'Poppins', sans-serif !important; text-align: left !important; margin-bottom: 8px !important; color: #ffffff !important; font-size: 14px !important; text-transform: uppercase; } /* 7. MOBILE RESPONSIVENESS */ @media (max-width: 768px) { .text-blocks .col-grid { grid-template-columns: 1fr !important; gap: 30px !important; } /* Optional: Center padding for mobile if you prefer */ .text-blocks .wrapper { padding-top: 40px !important; padding-bottom: 40px !important; } } } #fw-section-custom-html-33c08570-9edc-44a1-8dd2-c884aa964877 { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; } #fw-section-links-list-32c9f70b-5edd-4b91-aee6-ff14d79b1ac2 { --font-heading-scale: 1.1; --font-body-scale: 1.0; } #fw-section-links-list-32c9f70b-5edd-4b91-aee6-ff14d79b1ac2 { --color-primary: #161616; --color-primary-rgb: 22, 22, 22; --color-background: #ff9fca; --color-background-rgb: 255, 159, 202; --color-on-background: #161616; --color-on-background-rgb: 22, 22, 22; --color-on-primary: #d0d0d0; --color-on-primary-rgb: 208, 208, 208; --color-product-image-background: #161616; --color-background-brightness: 193; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #161616; --primary-btn-text: #d0d0d0; --primary-btn-border-color: #161616; --secondary-btn-bg: transparent; --secondary-btn-text: #161616; --secondary-btn-border-color: #161616; /* --- COMPONENT: WAYS YOU CAN HELP (LINK-LIST) --- */ /* 1. THE OUTER WRAPPER */ /* We reset the main wrapper to be the anchor for the 5% margin */ .link-list__inner .container.wrapper { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 5% !important; /* Your brand standard */ padding-right: 5% !important; display: block !important; } /* 2. THE HEADER BLOCK (Title & Sub-copy) */ /* We remove any default theme padding that is double-spacing the text */ .link-list__header.link-list__header--left { text-align: left !important; margin-left: 0 !important; padding-left: 0 !important; /* This removes the "inset" look */ max-width: 800px !important; margin-bottom: 30px !important; } .link-list__heading { font-family: var(--heading-font) !important; color: #161616 !important; font-size: 64px !important; line-height: 1.3 !important; margin-left: 0 !important; text-transform: uppercase; } .link-list__text { font-family: 'Poppins', sans-serif !important; color: #161616 !important; font-size: 18px !important; line-height: 1.3 !important; margin-left: 0 !important; } /* 3. THE BUTTONS CONTAINER */ /* Ensure the buttons container doesn't have its own extra padding */ .link-list__container--horizontal, .link-list__cta-container--horizontal { justify-content: flex-start !important; margin-left: 0 !important; padding-left: 0 !important; display: flex !important; gap: 16px !important; } /* 4. THE BUTTONS THEMSELVES */ .link-list__cta .button { width: auto !important; /* Stops the "button--expand" from stretching across the screen */ margin-left: 0 !important; } /* 5. MOBILE FIX */ @media screen and (max-width: 768px) { .link-list__heading { font-size: 38px !important; } } } #fw-section-rich-text-c8f3d0cf-a65c-4578-be63-d37877605d8f { /* ========================= VANSTA RICH TEXT HEADER (FORCE OVERRIDE VERSION) ========================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 { background-color: #161616 !important; } /* ========================= MAIN HEADING (COVERS ALL POSSIBLE STRUCTURES) ========================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h1, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h2, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h3, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__heading, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__title { color: #ff9fca !important; font-size: clamp(2.5rem, 6vw, 5rem) !important; line-height: 1.1 !important; text-transform: uppercase; margin: 0 0 20px 0 !important; } /* ========================= BODY / INTRO TEXT ========================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 p, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .intro, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__text { color: #ff9fca !important; font-size: 18px; max-width: 800px; opacity: 0.85; } /* ========================= WRAPPER CLEANUP ========================= */ #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__inner { background-color: #161616 !important; padding: 0 !important; } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h1, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 h2, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .rich-text__heading { font-size: 2rem !important; line-height: 1.2 !important; } #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 p, #fw-section-rich-text-bcf345f6-051c-4372-9d24-e941d3053306 .intro { font-size: 16px; } } } #fw-section-custom-html-5ae6842d-f3e1-4c2f-ae09-3e9398598335 { .vansta-archive{--heading-font:'Boldonse',sans-serif;font-family:'Poppins',sans-serif;background:#161616;color:#fff;min-height:100vh}.vansta-archive .archive-page{max-width:100%;margin:0;padding:70px 5% 60px;background:#161616!important;color:#fff;display:flex;flex-direction:column;align-items:flex-start;min-height:100vh;box-sizing:border-box}.vansta-archive .archive-main-title{font-family:var(--heading-font)!important;font-weight:700!important;color:#ffa0c8!important;font-size:64px!important;margin:0 0 25px!important;text-transform:uppercase;letter-spacing:.02em!important;line-height:1.05}.vansta-archive .archive-subtitle{max-width:800px;font-size:18px;line-height:1.6;margin:0 0 40px}.vansta-archive .archive-line-break{width:100%;height:2px;background:#2a2a2a;margin:0 0 35px}.vansta-archive .tag-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:45px}.vansta-archive .tag,.vansta-archive .share-btn{border:2px solid #ffa0c8;background:transparent;color:#ffa0c8;padding:10px 18px;text-transform:uppercase;font-family:'Poppins',sans-serif;font-size:12px;cursor:pointer;transition:.2s}.vansta-archive .tag:hover,.vansta-archive .share-btn:hover{background:rgba(255,160,200,.12)}.vansta-archive .tag.active,.vansta-archive .share-btn.liked{background:#ffa0c8;color:#161616}.vansta-archive .archive-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:55px 40px;width:100%}.vansta-archive .archive-item{background:#0f0f0f;position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4;width:100%}.vansta-archive .archive-item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease}.vansta-archive .archive-item:hover img{transform:scale(1.03)}.vansta-archive .archive-item:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(15,15,15,0) 35%,rgba(15,15,15,.05) 45%,rgba(15,15,15,.35) 62%,rgba(15,15,15,.82) 82%,rgba(15,15,15,.96) 100%)}.vansta-archive .meta{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2;box-sizing:border-box}.vansta-archive .meta h2{font-family:var(--heading-font)!important;font-weight:700!important;color:#ffa0c8!important;font-size:21px;line-height:1.15;margin:0 0 8px;text-transform:uppercase;letter-spacing:.02em}.vansta-archive .meta p{font-size:12px;line-height:1.5;margin:0 0 8px}.vansta-archive .author{font-size:10px;opacity:.6}.vansta-archive .archive-empty,.vansta-archive .archive-error{color:#777;padding:40px 0;margin:0}.vansta-archive .reader{position:fixed;inset:0;background:rgba(22,22,22,.97);display:none;z-index:9999999;overflow-y:auto;padding:120px 20px 80px;box-sizing:border-box}.vansta-archive .reader.active{display:block}body.no-scroll{overflow:hidden}.vansta-archive .reader-inner{max-width:850px;margin:auto}.vansta-archive .close{position:fixed;top:100px;right:25px;font-size:40px;color:#ffa0c8;cursor:pointer;z-index:99999999;line-height:1}.vansta-archive #rTitle{font-family:var(--heading-font)!important;font-weight:700!important;color:#ffa0c8!important;font-size:44px;text-transform:uppercase;line-height:1.05;letter-spacing:.02em}.vansta-archive #rMeta{opacity:.6;margin-bottom:18px}.vansta-archive .share-btn{margin:0 8px 35px 0}.vansta-archive #readerContent{font-size:15px;line-height:1.8}.vansta-archive #readerContent .article-text{margin:0 0 28px;line-height:1.8}.vansta-archive #readerContent .article-text p{margin:0 0 28px}.vansta-archive #readerContent strong{font-weight:700}.vansta-archive #readerContent em{font-style:italic}.vansta-archive #readerContent u{text-decoration:underline;text-underline-offset:3px}.vansta-archive #readerContent a{color:#ffa0c8;text-decoration:underline;text-underline-offset:3px}.vansta-archive .article-image{margin:35px 0 45px}.vansta-archive .article-image img{display:block;width:100%;height:auto;margin:0}.vansta-archive .media-credits{display:flex;flex-direction:column;gap:3px;font-size:10px;line-height:1.5;color:#777;margin-top:10px}.vansta-archive .media-credits-title{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:#666;margin-bottom:2px}.vansta-archive .media-credit{display:block;color:#777}.vansta-archive .article-video{margin:40px 0 45px}.vansta-archive .article-video iframe{display:block;width:100%;height:480px;margin:0;border:none}.vansta-archive .subheading{font-family:var(--heading-font),sans-serif;color:#ffa0c8;font-size:24px;margin:50px 0 18px;text-transform:uppercase;line-height:1.2}.vansta-archive blockquote{font-size:26px;color:#ffa0c8;border-left:3px solid #ffa0c8;padding-left:18px;margin:60px 0;font-style:italic;line-height:1.4}.vansta-archive .qa{font-size:15px;line-height:1.8;margin:0 0 28px}.vansta-archive .qa-speaker{color:#ffa0c8;font-weight:700}.vansta-archive .spacer.small{height:20px}.vansta-archive .spacer.medium{height:40px}.vansta-archive .spacer.large{height:80px}.vansta-archive .article-metadata{border-top:1px solid #2a2a2a;margin-top:70px;padding-top:18px;display:flex;flex-wrap:wrap;gap:5px 18px;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.05em;color:#666}.vansta-archive .article-metadata span+span:before{content:"";display:inline-block;width:3px;height:3px;background:#555;border-radius:50%;margin:0 18px 2px 0}.vansta-archive .article-disclaimer{border-top:1px solid #2a2a2a;margin-top:45px;padding-top:18px;font-size:10px;line-height:1.7;color:#555}.vansta-archive .disclaimer-title{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#666;margin-bottom:7px}.vansta-archive .article-disclaimer p{margin:0 0 10px}@media(max-width:768px){.vansta-archive .archive-page{padding:45px 20px 50px}.vansta-archive .archive-main-title{font-size:50px!important;line-height:1.3}.vansta-archive .archive-subtitle{font-size:15px;line-height:1.5}.vansta-archive .archive-line-break{margin-bottom:25px}.vansta-archive .tag-filters{margin-bottom:30px}.vansta-archive .archive-list{grid-template-columns:1fr;gap:25px}.vansta-archive .archive-item{aspect-ratio:3/4}.vansta-archive .meta{padding:18px}.vansta-archive .meta h2{font-size:20px}.vansta-archive .meta p{font-size:12px}.vansta-archive .reader{padding:90px 18px 60px}.vansta-archive .close{top:75px;right:18px;font-size:36px}.vansta-archive #rTitle{font-size:32px}.vansta-archive #rMeta{margin-bottom:15px}.vansta-archive #readerContent{font-size:14px;line-height:1.75}.vansta-archive #readerContent .article-text{line-height:1.75;margin-bottom:25px}.vansta-archive .article-video{margin:30px 0 35px}.vansta-archive .article-video iframe{height:260px}.vansta-archive .media-credits{font-size:9px;line-height:1.5;margin-top:8px}.vansta-archive .media-credits-title{font-size:8px}.vansta-archive .subheading{font-size:21px;margin-top:40px}.vansta-archive blockquote{font-size:22px;margin:45px 0}.vansta-archive .article-metadata{margin-top:55px;display:block}.vansta-archive .article-metadata span{display:block;margin-bottom:4px}.vansta-archive .article-disclaimer{margin-top:35px}} } #fw-section-custom-html-4065b606-0c9d-4e38-9711-4e80208f99e8 { :root { --primary: #ff9fca; --bg: #161616; --text: #d0d0d0; --text-on-primary: #161616; } body { font-family: 'Poppins', sans-serif; background-color: var(--bg); color: var(--text); line-height: 1.6; } /* Layout system */ .container { width: 90%; max-width: 1100px; margin: 0 auto; } /* Hero */ .hero { padding: 4rem 0 2rem; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; } .hero p { max-width: 600px; opacity: 0.8; } /* Grid system */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 2rem 0; } /* Card system */ .card { background: #1f1f1f; padding: 2rem; border-radius: 12px; transition: 0.3s; } .card:hover { transform: translateY(-5px); } /* Optional reusable elements */ .section { padding: 3rem 0; } .button { display: inline-block; background: var(--primary); color: var(--text-on-primary); padding: 0.7rem 1.5rem; border-radius: 999px; text-decoration: none; font-weight: 500; margin-top: 1rem; } /* Responsive */ @media (max-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } } } #fw-section-image-5ab14556-05dd-4aa4-9af5-cc59aaa2a2bf { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; } #fw-section-rich-text-177805773538408 { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; /* --- 1. GLOBAL FONTS & RESET --- */ *, body, p, span, li, a, h2, h3, h4, h5, h6, div, input, button { font-family: 'Poppins', sans-serif !important; text-transform: none !important; line-height: 1.3 !important; } /* --- 2. THE MAIN HEADINGS (Linked to Global Variable) --- */ h1, .hero__heading, .collection-template__heading, .fw-product-title-main, h2.rich-text__heading { font-family: var(--heading-font) !important; font-weight: 400 !important; color: #ffa0c8 !important; line-height: 1.3 !important; letter-spacing: normal !important; transition: color 0.3s ease; font-size: 48px !important; } h1:hover, .hero__heading:hover, .collection-template__heading:hover { color: #ff66a3 !important; } h2.rich-text__heading:hover { color: #ffa0c8 !important; cursor: default !important; } /* --- 3. NAVIGATION (Shop Link) --- */ .header__nav .header__list-item:last-child .header__link { color: #ffa0c8 !important; font-weight: 600 !important; transition: color 0.3s ease; } .header__nav .header__list-item:last-child .header__link:hover { color: #ff66a3 !important; } /* --- 4. PRODUCT TILES (Poppins Only) --- */ .tile__heading, h2.product-info__title { font-family: 'Poppins', sans-serif !important; color: #ffa0c8 !important; font-weight: 700 !important; line-height: 1.2 !important; font-size: 18px !important; margin-bottom: 8px !important; transition: color 0.3s ease; } .tile__heading:hover { color: #ff66a3 !important; } .tile__description { text-align: left !important; display: flex !important; flex-direction: column !important; align-items: left !important; width: 100% !important; margin-top: -15px !important; } .tile__price, .product-price { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; } /* --- 5. DESKTOP ONLY (Left Aligned) --- */ @media screen and (min-width: 769px) { h2.hero__heading, h1.collection-template__heading, h2.product-info__title, h2.rich-text__heading { text-align: left !important; width: auto !important; font-size: 56px !important; } .rich-text__text-container, .rich-text { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; align-items: flex-start !important; } } /* --- 6. MOBILE ONLY (Keep lefted) --- */ @media screen and (max-width: 768px) { h2.hero__heading, h1.collection-template__heading, h2.product-info__title { text-align: left !important; width: 100% !important; display: block !important; font-size: 32px !important; } h2.rich-text__heading { text-align: left !important; width: 100% !important; display: block !important; font-size: 32px !important; } .hero__content, .collection-template__header, .rich-text__text-container { width: 100% !important; padding: 0 15px !important; text-align: left !important; display: flex !important; flex-direction: column !important; align-items: left !important; } } /* --- 7. WHO ARE VANSTA - force left align --- */ #fw-section-rich-text-177805773538408 h2.rich-text__heading { text-align: left !important; width: auto !important; font-size: 32px !important; } section.rich-text.rich-text--fw-section-rich-text-177805773538408 { text-align: left !important; } section.rich-text.rich-text--fw-section-rich-text-177805773538408 { text-align: left !important; } } #fw-section-rich-text-0e8d3386-b4c5-4d46-9bd6-7fdfa9bddbe2 { --font-heading-scale: 1.69; --font-body-scale: 0.95; } #fw-section-rich-text-0e8d3386-b4c5-4d46-9bd6-7fdfa9bddbe2 { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; /* --- 1. GLOBAL FONTS & RESET --- */ *, body, p, span, li, a, h2, h3, h4, h5, h6, div, input, button { font-family: 'Poppins', sans-serif !important; text-transform: none !important; line-height: 1.4 !important; } /* --- 2. THE MAIN HEADINGS (Linked to Global Variable) --- */ h1, .hero__heading, .collection-template__heading, .fw-product-title-main, h2.rich-text__heading { font-family: var(--heading-font) !important; font-weight: 400 !important; color: #ffa0c8 !important; line-height: 1.1 !important; letter-spacing: normal !important; transition: color 0.3s ease; font-size: 48px !important; } h1:hover, .hero__heading:hover, .collection-template__heading:hover { color: #ff66a3 !important; } h2.rich-text__heading:hover { color: #ffa0c8 !important; cursor: default !important; } /* --- 3. NAVIGATION (Shop Link) --- */ .header__nav .header__list-item:last-child .header__link { color: #ffa0c8 !important; font-weight: 600 !important; transition: color 0.3s ease; } .header__nav .header__list-item:last-child .header__link:hover { color: #ff66a3 !important; } /* --- 4. PRODUCT TILES (Poppins Only) --- */ .tile__heading, h2.product-info__title { font-family: 'Poppins', sans-serif !important; color: #ffa0c8 !important; font-weight: 700 !important; line-height: 1.2 !important; font-size: 18px !important; margin-bottom: 8px !important; transition: color 0.3s ease; } .tile__heading:hover { color: #ff66a3 !important; } .tile__description { text-align: left !important; display: flex !important; flex-direction: column !important; align-items: left !important; width: 100% !important; margin-top: -15px !important; } .tile__price, .product-price { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; } /* --- 5. DESKTOP ONLY (Left Aligned) --- */ @media screen and (min-width: 769px) { h2.hero__heading, h1.collection-template__heading, h2.product-info__title, h2.rich-text__heading { text-align: left !important; width: auto !important; font-size: 56px !important; } .rich-text__text-container, .rich-text { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; align-items: flex-start !important; } } /* --- 6. MOBILE ONLY (Keep lefted) --- */ @media screen and (max-width: 768px) { h2.hero__heading, h1.collection-template__heading, h2.product-info__title { text-align: left !important; width: 100% !important; display: block !important; font-size: 32px !important; } h2.rich-text__heading { text-align: left !important; width: 100% !important; display: block !important; font-size: 32px !important; } .hero__content, .collection-template__header, .rich-text__text-container { width: 100% !important; padding: 0 15px !important; text-align: left !important; display: flex !important; flex-direction: column !important; align-items: left !important; } } /* --- 7. WHO ARE VANSTA - force left align --- */ #fw-section-rich-text-177805773538408 h2.rich-text__heading { text-align: left !important; width: auto !important; font-size: 32px !important; } section.rich-text.rich-text--fw-section-rich-text-177805773538408 { text-align: left !important; } section.rich-text.rich-text--fw-section-rich-text-177805773538408 { text-align: left !important; } } #fw-section-rich-text-0d9db689-b340-4050-bbf5-35f7cf18ea89 { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; } #fw-section-text-blocks-ee9c9a3e-ba78-47b3-b2df-0291d5722c63 { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; /* --- 1. GLOBAL FONTS --- */ *, body, p, span, li, a, h2, h3, h4, h5, h6, div { font-family: 'Poppins', sans-serif !important; text-transform: none !important; } /* --- 2. THE H1 UPGRADE (Linked to Global Variable) --- */ .rich-text__heading { /* Updated to use your variable */ font-family: var(--heading-font) !important; font-weight: 400 !important; color: #ffa0c8 !important; line-height: 1.1 !important; text-align: left !important; display: block !important; width: 100% !important; margin: 0 !important; } /* --- 3. POSITIONING FIX --- */ .rich-text__header { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: flex-start !important; text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } .section--rich-text .rich-text__container, .section--rich-text .rich-text__content { display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; } .rich-text__text-container { text-align: left !important; align-items: flex-start !important; width: 100% !important; padding-left: 20px !important; } /* --- 4. SIZING --- */ @media screen and (max-width: 768px) { .rich-text__heading { font-size: 38px !important; } } @media screen and (min-width: 769px) { .rich-text__heading { font-size: 64px !important; } .rich-text__text-container { padding-left: 40px !important; } } /* --- 5. TEAM MEMBERS (RE-STABILIZED) --- */ .text-blocks__item, .text-blocks__item-content { border: none !important; box-shadow: none !important; background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .text-blocks__item-content::before { content: "" !important; order: 1 !important; display: block !important; width: 110px !important; height: 110px !important; margin-bottom: 20px !important; background-size: cover !important; background-position: center !important; border-radius: 50% !important; border: 3px solid #ffa0c8 !important; } /* Photos (Intact) */ div:nth-child(1) > .text-blocks__item > .text-blocks__item-content::before { background-image: url('https://imgproxy.fourthwall.dev/f4kOR7i9d4_cbm6_tVj0ncXD40FPO2um-iIuLdUVeJI/w:1920/sm:1/enc/T77bq-xT-4J3Zih7/Ykb8U07dOC983rwa/c3A4XxgFAfUDgyBh/KBAXdtXT3VVtMm5W/l6sp0TEmO4ChDGLc/YnoZlZR7CXnmdNIr/dVAKLOktrqo6eT2y/SYrYw5FBjV3s27YZ/U3L2XgZR6Dh-Vxi_/Bqp2AzSFsBGBMlZs/RaiXPEdGX-ZubHeN/kU70fypWn-9dcS9r/uZRSJYKKHIVZQLhb/peAQoXrdxqcIX71q/ngnmwcKpHz-Wcsvx/p2zkElYBs9p1mniQ.jpg') !important; } div:nth-child(2) > .text-blocks__item > .text-blocks__item-content::before { background-image: url('https://imgproxy.fourthwall.dev/wCu-WG4sErdBVSOclvsfgBKfSR_eFKit4kz5qivHP1U/w:1920/sm:1/enc/Ic6rilpl0-FJpoNY/k0OvUIRmD_vwlgYE/hV8unoNDZznhh1qH/dew595XUziV9Qm3R/0QJLSZK0KN2hLo-6/Ajl1E9xsWCZSbH70/i3mn7PAMoo8Bl58j/uAnjT0a9Tq8-KCf8/CiWn-MDXl2zcso3I/QViZHSxg34mgxRDq/noEvx0cyNXSSV_Ju/o69_S2VEXjT7ItY1/Ci2hDWC4d7Yif4sw/JALKKpP2jJ9AMJH6/vkfVctcepoOxtm4r/pfWO5VK-XM4gsuDD.jpg') !important; } div:nth-child(3) > .text-blocks__item > .text-blocks__item-content::before { background-image: url('https://imgproxy.fourthwall.dev/H0USpqvG8t4r-vCt3LzgijfH7ZxiGfujz9dU_4mBBW8/w:1920/sm:1/enc/i8UQxWifcIs-_Cpr/GEo4ezeNxubh7KQw/yDJK12gZs44_rIxD/sShv1QNNSfF3DeQm/y1Uruxp0_hckcO7V/RfeQV808tZgM7sZj/aqMglTMUgNGzBccp/7vtL-VZOwRrIqlLV/6jEFvTrShASxtmOm/hhJcJ4bHKBLhcYzq/HnCNY_g5kdSFElxY/ZBhCvOFxd4yAA9Cg/WB4Sax358l2EOVZz/tmlpBrZA4kdIZDjN/G9TehEqJlR_5Ss0H/8Y2vrYNm4hewDGbV.jpg') !important; } div:nth-child(4) > .text-blocks__item > .text-blocks__item-content::before { background-image: url('https://imgproxy.fourthwall.dev/8SLSyaob8fa1bhNOZz8xdFLXEevc80v8Kt6MlpHiK04/w:1920/sm:1/enc/-hyBFKXgkGw34bHv/GY3lxJscmH_5M1ep/3ULb647jaGRyPtBv/2_FvU0M1rcRoY7k9/KXS7z3KlOHJm3xpO/rc2eC8--8MpXtcF9/b2ad2ts7gBAYJNo4/TLpX8_FvFNw4cpma/iOlzmKw_FXxxTb2y/hz3-tUhcJH_Fc_QC/c7K72yk-fISIwjEh/4iyvTTL-s-bGeUBq/O-rTPO8ynWTnI-7z/qU6w3Neiomm6Ix60/dUU8tgvpqcO971OP/h-ld6Y97_C9XGGvh.jpg') !important; } div:nth-child(5) > .text-blocks__item > .text-blocks__item-content::before { background-image: url('https://imgproxy.fourthwall.dev/aJgeZLUU88yBAEw0kZtho-wemieuch4tPolubagNmQ0/w:1920/sm:1/enc/kVfRGRJ-MitbUPQq/LXW74EuMJiX0rm8l/GeoyfLzK5VWeO52m/3ETgw-GwOJB9Qvk6/uZgQLo4NJ92y1c5T/DfC9Uct4B6ppZUc1/tJbns-RewT9cgEzw/0-8uwOCYHCUAqBJp/fTiuF8iQJB53rGaS/Sfs3GTIbrnreXxJ5/3RUaJUWt42xBC2La/3l0AyoNRp5xRb4Cj/CiAd_wb_C4UBS-S3/70F2U6iQF-EMdj09/E2CdHKA0ZV51pdwi/-tKLNK_2ZpsZFPwh.jpg') !important; } div:nth-child(6) > .text-blocks__item > .text-blocks__item-content::before { background-image: url('https://imgproxy.fourthwall.dev/jwtaUFcI4WpDJipWMes8nBJprnZbl0_6JdPIeHwRpLA/w:1920/sm:1/enc/gg7yhiJkANzA8zkM/T5P7IidQSEl-S9Ff/zO4YHo-tFMObLypu/z4QUat5PpSt_239-/-70HHZ43vE5TFYCJ/LzxL6nBA3Wq2EfUA/npnDiDI938QNaeZD/x6znN-Wd8YEGl8JS/n38dkVc411W9BTU6/SGIzChXKe2q8gi7j/nx8WlEqMTpgvTpR0/nX_6wNnLfbwtmcRr/2Dec6aVXKYNIUCPW/hl08mWa5GRrIOxLe/HIO9pih0uDgZFNR_/tPc5zRgtFY1g99wZ.jpg') !important; } .text-blocks__title { order: 2 !important; /* Linked to Variable */ font-family: var(--heading-font) !important; color: #ffa0c8 !important; font-size: 28px !important; } .text-blocks__top-text { order: 3 !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 14px !important; color: #ffffff !important; } .text-blocks__text { order: 4 !important; font-family: 'Poppins', sans-serif !important; line-height: 1.6 !important; color: #ffffff !important; } } #fw-section-collection-template-collection-vansta-store-page { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; /* =========================================================== VANSTA SHOP PAGE Full Collection Styling =========================================================== */ /* ----------------------------------------------------------- COLLECTION HEADER ----------------------------------------------------------- */ .collection-template__header, .collection-header { width: 100% !important; max-width: 100% !important; padding: 40px 0 20px 0 !important; margin: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; } h1.collection-template__heading { font-family: var(--heading-font) !important; font-weight: 400 !important; font-size: 56px !important; color: #ffa0c8 !important; line-height: 1.1 !important; text-align: left !important; text-transform: uppercase !important; margin: 0 !important; padding-left: 5% !important; } h1.collection-template__heading:hover { color: #ffa0c8 !important; } /* ----------------------------------------------------------- PRODUCT GRID ----------------------------------------------------------- */ .tiles, .tiles-container, .tile-grid, .collection-grid, .product-grid { gap: 35px 25px !important; } /* ----------------------------------------------------------- PRODUCT CARDS ----------------------------------------------------------- */ .tile, .tile__content, .product-card { background: transparent !important; border: 1px solid #161616 !important; border-radius: 0 !important; box-shadow: none !important; } /* ----------------------------------------------------------- PRODUCT IMAGE ----------------------------------------------------------- */ .tile__image-wrapper { overflow: hidden !important; border-bottom: 1px solid #161616 !important; } .tile__image-wrapper img { transform: scale(1.03); transition: transform .35s ease; } .tile:hover .tile__image-wrapper img, .product-card:hover img { transform: scale(1.07); } /* ----------------------------------------------------------- PRODUCT TITLE ----------------------------------------------------------- */ .tile__heading, .tile__title, .product-card__title, .product-card__title a { font-family: var(--heading-font) !important; font-size: 20px !important; font-weight: 400 !important; color: #ffa0c8 !important; text-align: left !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.25 !important; display: block !important; margin-top: 18px !important; margin-bottom: 10px !important; } .tile__heading:hover, .tile__title:hover, .product-card__title:hover, .product-card__title a:hover { color: #ffa0c8 !important; } /* ----------------------------------------------------------- PRICE ----------------------------------------------------------- */ .tile__price, .tile__price span, .product-card__price, .product-card__price span, .product-price { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1.5 !important; } /* ----------------------------------------------------------- MOBILE - FORCE 1 COLUMN ----------------------------------------------------------- */ @media screen and (max-width:768px){ .collection-template__header, .collection-header { padding: 30px 15px 20px !important; } h1.collection-template__heading { font-size: 32px !important; padding-left: 0 !important; } /* Override ALL possible product grids */ .tiles, .tiles-container, .tile-grid, .collection-grid, .product-grid, .grid, .product-list, .collection-product-list, .collection-products, .products-grid { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto !important; width: 100% !important; gap: 35px !important; } /* Shopify grid items */ .grid__item, .tile, .product-card { grid-column: span 1 !important; width: 100% !important; max-width: 100% !important; } /* Product images */ .tile__image-wrapper img, .product-card img { width: 100% !important; } /* Mobile titles */ .tile__heading, .tile__title, .product-card__title, .product-card__title a { font-size: 15px !important; line-height: 1.4 !important; letter-spacing: 0.5px !important; } /* Mobile prices */ .tile__price, .tile__price span, .product-card__price, .product-card__price span, .product-price { font-size: 18px !important; } } } #fw-section-hero-0 { --font-heading-scale: 1.25; --font-body-scale: 1.1; } #fw-section-hero-0 { --color-primary: #ffa0c8; --color-primary-rgb: 255, 160, 200; --color-background: #171717; --color-background-rgb: 23, 23, 23; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #171717; --color-on-primary-rgb: 23, 23, 23; --color-product-image-background: #d0d0d0; --color-background-brightness: 23; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ffa0c8; --primary-btn-text: #171717; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ffa0c8; --secondary-btn-border-color: #ffa0c8; /* --- 1. HERO BOUNDING BOX & ALIGNMENT --- */ [class*="Hero"] [class*="Content"], [class*="Banner"] [class*="Content"], .fw-hero-content, .hero__content { max-width: 600px !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin-left: 0 !important; margin-right: auto !important; word-wrap: break-word !important; } /* HERO HEADING - ADDED FONT STACK */ h2.hero__heading, h2.hero__heading--regular, h2.rich-text__heading, h1.collection-template__heading, [class*="Hero"] h1, [class*="Hero"] h2 { font-family: 'Boldonse', sans-serif !important; color: #d0d0d0 !important; text-align: left !important; font-weight: 700 !important; line-height: 1.3 !important; text-transform: uppercase !important; } /* --- 2. MOBILE SPECIFIC BUTTON ALIGNMENT --- */ @media screen and (max-width: 768px) { .hero__buttons, .hero__button-wrapper, .hero__actions, footer { display: flex !important; justify-content: flex-start !important; width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; } .hero__button, .btn, [class*="Button_root"] { margin-left: 0 !important; margin-right: auto !important; } /* mobile heading size + spacing tweak */ h2.hero__heading, [class*="Hero"] h1 { font-size: 2.2rem !important; line-height: 1.3 !important; } } /* --- 3. PRODUCT TILES (Carousel) --- */ .tile__heading { color: #ffa0c8 !important; font-family: 'Boldonse', sans-serif !important; font-weight: 600 !important; text-align: center !important; line-height: 1.3 !important; text-transform: uppercase !important; } .tile__description { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-top: -30px !important; z-index: 10; } .tile__image-wrapper img { transform: scale(1.15) !important; transform-origin: top center !important; } .tile__image-wrapper { overflow: hidden !important; } } #fw-section-custom-html-82a70a90-e0fc-4e72-88b4-ee13ea7ddff2 { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; .line-break { width: 100%; max-width: auto; height: 2px; background: #2a2a2a; } } #fw-section-text-carousel-622429aa-006b-4564-90fb-67a0c1823059 { --font-heading-scale: 0.7; --font-body-scale: 0.7; } #fw-section-featured-collection-0 { --font-heading-scale: 1.1; --font-body-scale: 1.2; } #fw-section-featured-collection-0 { --color-primary: #ffa0c8; --color-primary-rgb: 255, 160, 200; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ffa0c8; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ffa0c8; --secondary-btn-border-color: #ffa0c8; /* --- 1. PRODUCT TILES (Keep your custom look) --- */ .tile__description { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-top: -30px !important; z-index: 10; } .tile__heading { font-family: var(--heading-font) !important; color: #ffa0c8 !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.3 !important; margin-bottom: 4px !important; } .tile__price, .tile__price span, .product-card__price, .product-card__price span, .product-price { margin-top: -6px !important; } .tile__image-wrapper img { transform: scale(1.15) !important; transform-origin: top center !important; } .tile__image-wrapper { overflow: hidden !important; } /* --- 2. MOBILE HERO FIX (The "Forced Alignment") --- */ @media screen and (max-width: 768px) { /* Target the text and the button containers directly */ h2.hero__heading, h2.hero__heading--regular, .hero__buttons, .hero__button-wrapper { display: block !important; text-align: left !important; width: 90vw !important; margin-left: 5vw !important; margin-right: auto !important; } /* Force the button itself to stay left within that new wide box */ .hero__button, .button--hero, .btn { margin-left: 0 !important; display: inline-block !important; } /* Collapse any "Ghost Columns" that are squashing your content */ .hero__content, .hero__content-inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; display: block !important; } /* Mobile product title spacing */ .tile__heading { font-family: var(--heading-font) !important; font-size: 15px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; line-height: 1.45 !important; margin-top: 15px !important; margin-bottom: 2px !important; } /* Mobile product price spacing */ .tile__price, .tile__price span, .product-card__price, .product-card__price span, .product-price { margin-top: -4px !important; } } } #fw-section-text-carousel-df7f3c90-3f16-4133-9788-19d9d90fd1e1 { --font-heading-scale: 0.7; --font-body-scale: 0.7; } #fw-section-image-with-text-e4313eb1-84da-4fc6-b6c3-abb11d520811 { --font-heading-scale: 1.5; --font-body-scale: 0.9; } #fw-section-image-with-text-e4313eb1-84da-4fc6-b6c3-abb11d520811 { /* --- 1. GLOBAL FONTS & RESET --- */ *, body, p, span, li, a, h3, h4, h5, h6, div, input, button { font-family: 'Poppins', sans-serif !important; text-transform: none !important; line-height: 1.4 !important; } /* THE BOLDONSE OVERHAUL: Replaces Stalinist One */ h1, .hero__heading, .collection-template__heading, .fw-product-title-main { font-family: 'Boldonse', sans-serif !important; font-weight: 700 !important; color: #ffa0c8 !important; line-height: 1.3 !important; /* Boldonse specific vertical lockup */ text-transform: uppercase !important; letter-spacing: 0.02em !important; transition: color 0.3s ease; } /* Rollover for Headings */ h1:hover, .hero__heading:hover { color: #ff66a3 !important; } /* --- 2. NAVIGATION (Shop Link + Rollover) --- */ .header__nav .header__list-item:last-child .header__link { color: #ffa0c8 !important; font-weight: 600 !important; transition: color 0.3s ease; } .header__nav .header__list-item:last-child .header__link:hover { color: #ff66a3 !important; } /* --- 3. PRODUCT TILES & SUB-HEADINGS --- */ .tile__heading, h2.product-info__title, h2.rich-text__heading, h2 { font-family: 'Boldonse', sans-serif !important; color: #ffa0c8 !important; font-weight: 700 !important; line-height: 1.3 !important; text-transform: uppercase !important; margin-bottom: 8px !important; transition: color 0.3s ease; } /* Hero Grey Override (Keeping the Home industrial look) */ .hero__heading, .hero__content h1, .hero__content h2 { color: #d0d0d0 !important; } .tile__description { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; margin-top: -15px !important; } .tile__price, .product-price { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; margin-top: 5px !important; } /* --- 4. DESKTOP ONLY (Wider than 768px) --- */ @media screen and (min-width: 769px) { h2.hero__heading, h1.collection-template__heading, h2.product-info__title { text-align: left !important; } .rich-text__text-container, .rich-text, .rich-text h2.rich-text__heading { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } } /* --- 5. MOBILE ONLY (Smaller than 768px) --- */ @media screen and (max-width: 768px) { h1, h2.hero__heading, h1.collection-template__heading, h2.rich-text__heading { text-align: center !important; width: 100% !important; display: block !important; font-size: 26px !important; /* Bumped slightly for Boldonse impact */ line-height: 1.3 !important; } .hero__content, .collection-template__header, .header__content, .rich-text__text-container { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .header__logo-image { max-width: 150px !important; height: auto !important; } } } #fw-section-rich-text-b611c73a-878d-412a-9f3e-380743bc06e3 { /* --- GLOBAL PINK & LEFT ALIGNMENT --- */ /* Targets the 'VANSTA standard', Hero, Collection, and Product titles */ h2.rich-text__heading, h2.hero__heading, h1.collection-template__heading, h2.product-info__title { color: #ffa0c8 !important; text-align: left !important; font-weight: 700 !important; margin-left: 0 !important; padding-left: 0 !important; display: block !important; } /* Ensure the containers don't force a center-alignment */ .rich-text__text-container, .rich-text, .hero__content, .collection-template__header { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; padding-left: 0 !important; margin-left: 0 !important; } /* --- CENTER "THE VANSTA STANDARD" SECTION --- */ /* This targets the container and the text specifically for Rich Text blocks */ .rich-text__text-container, .rich-text { text-align: center !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; } /* This ensures the actual

inside that section centers its text */ .rich-text h2.rich-text__heading { text-align: center !important; width: 100% !important; } /* This ensures the body text under the heading also centers */ .rich-text .rich-text__text { text-align: center !important; } } #fw-section-image-with-text-de065760-251a-4128-8485-ba8d5f9346f7 { --font-heading-scale: 1.6; --font-body-scale: 1.0; } #fw-section-image-with-text-de065760-251a-4128-8485-ba8d5f9346f7 { --color-primary: #161616; --color-primary-rgb: 22, 22, 22; --color-background: #ffa0c8; --color-background-rgb: 255, 160, 200; --color-on-background: #161616; --color-on-background-rgb: 22, 22, 22; --color-on-primary: #d0d0d0; --color-on-primary-rgb: 208, 208, 208; --color-product-image-background: #161616; --color-background-brightness: 193; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #161616; --primary-btn-text: #d0d0d0; --primary-btn-border-color: #161616; --secondary-btn-bg: transparent; --secondary-btn-text: #161616; --secondary-btn-border-color: #161616; /* --- 1. GLOBAL SETTINGS & MASTER FONT VARIABLE --- */ :root { /* CHANGE THIS ONE LINE TO UPDATE THE FONT GLOBALLY */ --heading-font: 'Boldonse', sans-serif; --brand-pink: #ffa0c8; --brand-grey: #d0d0d0; } *, body, p, span, li, a, h3, h4, h5, h6, div, input, button { font-family: 'Poppins', sans-serif !important; text-transform: none !important; line-height: 1.4 !important; } /* --- 2. GLOBAL HEADING RULES (The "Locked" Look) --- */ h1, h2, .hero__heading, .collection-template__heading, .fw-product-title-main, .tile__heading, [class*="upsell"] h2, [class*="featured-section"] h2, .issue-available__heading { font-family: var(--heading-font) !important; font-weight: 700 !important; line-height: 1.3 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; transition: color 0.3s ease; } /* Default Heading Color & Issue 4 (Pink) */ h1, h2, .tile__heading, [class*="featured-section"] h2, .issue-available__heading { color: var(--brand-pink) !important; } /* Hero Color ONLY (Grey) */ .hero__heading, [class*="Hero"] h1, [class*="Hero"] h2 { color: var(--brand-grey) !important; } /* --- 3. PRODUCT TILES & NAVIGATION --- */ .header__nav .header__list-item:last-child .header__link { color: var(--brand-pink) !important; font-weight: 600 !important; } .tile__description { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-top: -15px !important; } /* --- 4. DESKTOP ALIGNMENT (5% Rule) --- */ @media screen and (min-width: 769px) { h2.hero__heading, h1.collection-template__heading, .product-info__title, [class*="featured-section"] h2 { text-align: left !important; padding-left: 5% !important; } } /* --- 5. MOBILE RESPONSIVENESS --- */ @media screen and (max-width: 768px) { h1, h2, .hero__heading { text-align: center !important; font-size: 26px !important; line-height: 1.3 !important; padding-left: 15px !important; padding-right: 15px !important; } .header__logo-image { max-width: 150px !important; } } } #fw-section-custom-html-5df6088d-e9c8-4ef2-91d8-3efe18bbf981 { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #ff9fca; --color-background-rgb: 255, 159, 202; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 193; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; /* --- 1. GLOBAL SETTINGS & MASTER FONT VARIABLE --- */ :root { --heading-font: 'Boldonse', sans-serif; --brand-pink: #ffa0c8; --brand-grey: #d0d0d0; } *, body, p, span, li, a, h3, h4, h5, h6, div, input, button { font-family: 'Poppins', sans-serif !important; text-transform: none !important; line-height: 1.4 !important; } /* --- 2. GLOBAL HEADING RULES --- */ h1, h2, .hero__heading, .collection-template__heading, .fw-product-title-main, .tile__heading, [class*="upsell"] h2, [class*="featured-section"] h2, .issue-available__heading { font-family: var(--heading-font) !important; font-weight: 700 !important; line-height: 1.3 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; transition: color 0.3s ease; } /* Default heading color */ h1, h2, .tile__heading, [class*="featured-section"] h2, .issue-available__heading { color: var(--brand-pink) !important; } /* Hero override */ .hero__heading, [class*="Hero"] h1, [class*="Hero"] h2 { color: var(--brand-grey) !important; } /* --- 3. NAV --- */ .header__nav .header__list-item:last-child .header__link { color: var(--brand-pink) !important; font-weight: 600 !important; } .tile__description { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-top: -15px !important; } /* --- 4. DESKTOP ALIGNMENT --- */ @media screen and (min-width: 769px) { h2.hero__heading, h1.collection-template__heading, .product-info__title, [class*="featured-section"] h2 { text-align: left !important; padding-left: 4% !important; } } /* --- 5. MOBILE --- */ @media screen and (max-width: 768px) { h1, h2, .hero__heading { text-align: center !important; font-size: 27px !important; line-height: 1.3 !important; padding-left: 15px !important; padding-right: 15px !important; } .header__logo-image { max-width: 150px !important; } } /* ========================================================= ISSUE 4 SECTION LAYOUT ========================================================= */ .issue-available { display: grid; grid-template-columns: 1fr 1fr; gap: 95px; align-items: center; width: 100%; padding: 85px 4%; background: var(--brand-pink) !important; } /* COVER IMAGE */ .issue-available__cover { width: 100%; max-width: 520px; border-radius: 0; overflow: hidden; } .issue-available__cover img { width: 100%; display: block; border-radius: 0; } /* TEXT */ .issue-available__content { display: flex; flex-direction: column; } /* HEADLINE */ .issue-available__heading { font-size: 46px; margin-bottom: 20px; color: #161616 !important; } /* BODY TEXT */ .issue-available__text { font-size: 15px; margin-bottom: 30px; max-width: 560px; color: #161616 !important; } /* BUTTON */ .issue-available__button { padding: 13px 28px; border: 2px solid #161616; background: #161616; color: #d0d0d0; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 0; width: fit-content; transition: 0.2s ease; } .issue-available__button:hover { background: #161616; color: #ff9fca; } /* ========================================================= MODAL SYSTEM ========================================================= */ #reader-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; pointer-events: none; transition: 0.25s ease; } #reader-modal.active { opacity: 1; pointer-events: all; } #reader-frame { width: 90%; height: 90%; border: none; border-radius: 0; } #close-reader { position: absolute; top: 20px; right: 30px; background: none; border: none; font-size: 32px; color: white; cursor: pointer; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .issue-available { grid-template-columns: 1fr; text-align: center; gap: 40px; padding: 70px 5%; } .issue-available__text { margin-left: 0; margin-right: 0; text-align: left; } .issue-available__cover { margin: 0 auto; max-width: 420px; } .issue-available__heading { font-size: 36px; } } } #fw-section-footer { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; } #fw-section-header { --font-heading-scale: 1.2; --font-body-scale: 1.0; } #fw-section-header { --color-primary: #ffa0c8; --color-primary-rgb: 255, 160, 200; --color-background: #171717; --color-background-rgb: 23, 23, 23; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #171717; --color-on-primary-rgb: 23, 23, 23; --color-product-image-background: #d0d0d0; --color-background-brightness: 23; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ffa0c8; --primary-btn-text: #171717; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ffa0c8; --secondary-btn-border-color: #ffa0c8; /* --- 1. GLOBAL FONTS & RESET --- */ *, body, p, span, li, a, h2, h3, h4, h5, h6, div, input, button { font-family: 'Poppins', sans-serif !important; text-transform: none !important; line-height: 1.4 !important; } /* ONLY the main H1 gets Stalinist One */ h1, .hero__heading, .collection-template__heading, .fw-product-title-main { font-family: 'Stalinist One', cursive !important; font-weight: 400 !important; color: #ffa0c8 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; transition: color 0.3s ease; /* Smooth color transition */ } /* Rollover for H1 */ h1:hover, .hero__heading:hover { color: #ff66a3 !important; /* Darker Pink */ } /* --- 2. NAVIGATION (Shop Link + Rollover) --- */ .header__nav .header__list-item:last-child .header__link { color: #ffa0c8 !important; font-weight: 600 !important; transition: color 0.3s ease; } .header__nav .header__list-item:last-child .header__link:hover { color: #ff66a3 !important; /* Darker Pink */ } /* --- 3. PRODUCT TILES & HEADINGS --- */ .tile__heading, h2.product-info__title, h2.rich-text__heading { font-family: 'Poppins', sans-serif !important; color: #ffa0c8 !important; font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 8px !important; transition: color 0.3s ease; } /* Rollover for Product Titles */ .tile__heading:hover, h2.product-info__title:hover { color: #ff66a3 !important; /* Darker Pink */ } .tile__description { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; margin-top: -15px !important; } .tile__price, .product-price { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; margin-top: 5px !important; } /* --- 4. DESKTOP ONLY (Wider than 768px) --- */ @media screen and (min-width: 769px) { h2.hero__heading, h1.collection-template__heading, h2.product-info__title { text-align: left !important; } .rich-text__text-container, .rich-text, .rich-text h2.rich-text__heading { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } } /* --- 5. MOBILE ONLY (Smaller than 768px) --- */ @media screen and (max-width: 768px) { h2.hero__heading, h1.collection-template__heading, h2.product-info__title, h2.rich-text__heading { text-align: center !important; width: 100% !important; display: block !important; } .hero__content, .collection-template__header, .header__content, .rich-text__text-container { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } h1, h2.hero__heading, h1.collection-template__heading { font-size: 24px !important; line-height: 1.2 !important; } .header__logo-image { max-width: 150px !important; height: auto !important; } } } #fw-section-product-product-default { --font-heading-scale: 1.1; --font-body-scale: 1.0; } #fw-section-product-product-default { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #d0d0d0; --color-on-background-rgb: 208, 208, 208; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #d0d0d0; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #d0d0d0; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; /* --- 1. THE "BROWSER TRICK" & GLOBAL FONTS --- */ :root { --theme-color: #000000 !important; --primary-color: #000000 !important; --color-primary: #000000 !important; --brand-primary: #000000 !important; --heading-font: 'Boldonse', sans-serif; } html, body { background-color: #000000 !important; background: #000000 !important; overscroll-behavior-y: none !important; } /* --- 2. PRODUCT TILES (SHOP REPLICATION) --- */ .tile__heading, .tile__title { color: #ffa0c8 !important; font-family: var(--heading-font) !important; font-weight: 600 !important; font-size: 1.2rem !important; text-align: center !important; text-transform: uppercase !important; margin-top: 15px !important; line-height: 1.4 !important; letter-spacing: 0.02em !important; } .tile__description, .tile__price { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; font-family: 'Poppins', sans-serif !important; color: #ffffff !important; line-height: 1.6 !important; margin-top: 5px !important; } .tile__price, .tile__price span { font-size: 1.25rem !important; font-weight: 500 !important; opacity: 1 !important; } .tile__image-wrapper img { transform: scale(1.05) !important; transform-origin: center center !important; } .tile__image-wrapper { overflow: hidden !important; border-bottom: 1px solid #161616 !important; } /* --- 3. MAIN PRODUCT INFO (BALANCED HEADING & PRICE) --- */ .product-info__title, h2.product-info__title, h1.product-title { color: #ffa0c8 !important; font-family: var(--heading-font) !important; text-align: left !important; font-size: 3.5rem !important; line-height: 1.25 !important; text-transform: uppercase !important; margin-top: 0 !important; margin-bottom: 2px !important; padding-bottom: 0 !important; } .product-info__price, .product-info__price span { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; font-size: 1.5rem !important; font-weight: 500 !important; text-align: left !important; margin-top: 0 !important; margin-bottom: 15px !important; display: block !important; } /* SECTION: Description (Boxed by lines) */ .product-info__description { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; line-height: 1.6 !important; margin-top: 10px !important; padding-top: 20px !important; padding-bottom: 20px !important; border-top: 1px solid #222222 !important; border-bottom: 1px solid #222222 !important; width: 100% !important; } /* SECTION: Size Picker (Tightened) */ .product-info__variant-picker, [class*="VariantPicker"] { margin-top: 0 !important; padding-top: 15px !important; padding-bottom: 5px !important; /* Minimal bottom padding */ border-bottom: none !important; width: 100% !important; } /* SECTION: SIZE GUIDE (Shifted Up) */ .product-info__size-guide, [class*="SizeGuide"], .size-guide-link-wrapper { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 10px !important; display: block !important; text-align: left !important; } /* SECTION: Quantity & Actions */ .product-info__quantity, [class*="QuantitySelector"], .product-info__actions { margin-top: 0 !important; padding-top: 5px !important; padding-bottom: 25px !important; border-bottom: 1px solid #222222 !important; width: 100% !important; } /* Labels */ .product-info__variant-picker-label, [class*="VariantPicker"] label, .product-info__quantity-label, [class*="QuantitySelector"] label { font-family: 'Poppins', sans-serif !important; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; margin-bottom: 8px !important; } /* --- 4. LAYOUT ALIGNMENT (5% BRAND MARGIN) --- */ .product-info { padding-left: 5% !important; padding-right: 5% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } /* --- 5. BUTTONS & STICKY DOCK --- */ [class*="StickyActions"], [class*="ProductStickyFooter"], .product-info__sticky-actions { background-color: #000000 !important; position: fixed !important; bottom: 0 !important; z-index: 99999 !important; border-top: 1px solid #222222 !important; } button[class*="Button"], .product-info__actions button { background-color: #ffa0c8 !important; color: #000000 !important; font-family: 'Poppins', sans-serif !important; font-weight: 800 !important; text-transform: uppercase !important; border-radius: 4px !important; margin-top: 15px !important; } /* --- 6. MOBILE RESPONSIVENESS --- */ @media screen and (max-width: 768px) { .product-info__title { font-size: 2.2rem !important; line-height: 1.25 !important; } } /* --- 7. FINAL BLACK GUARD --- */ body::after { content: "" !important; position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: env(safe-area-inset-bottom) !important; background: #000000 !important; z-index: 999999 !important; pointer-events: none !important; } } #fw-section-product-recommendations-product-default { --font-heading-scale: 1.1; --font-body-scale: 0.95; } #fw-section-product-recommendations-product-default { --color-primary: #161616; --color-primary-rgb: 22, 22, 22; --color-background: #ff9fca; --color-background-rgb: 255, 159, 202; --color-on-background: #161616; --color-on-background-rgb: 22, 22, 22; --color-on-primary: #d0d0d0; --color-on-primary-rgb: 208, 208, 208; --color-product-image-background: #161616; --color-background-brightness: 193; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #161616; --primary-btn-text: #d0d0d0; --primary-btn-border-color: #161616; --secondary-btn-bg: transparent; --secondary-btn-text: #161616; --secondary-btn-border-color: #161616; /* --- 1. THE "BROWSER TRICK" & GLOBAL FONTS --- */ :root { --theme-color: #000000 !important; --primary-color: #000000 !important; --color-primary: #000000 !important; --brand-primary: #000000 !important; --heading-font: 'Boldonse', sans-serif; } html, body { background-color: #000000 !important; background: #000000 !important; overscroll-behavior-y: none !important; } /* --- 2. PRODUCT TILES (PINK SECTION - ALL TEXT TO BLACK) --- */ [class*="upsell"], [class*="recommendations"], [class*="RelatedProducts"] { background-color: #ffa0c8 !important; /* Ensure the section stays pink */ padding-bottom: 60px !important; } [class*="upsell"] h2, [class*="recommendations"] h2, [class*="RelatedProducts"] h2 { color: #000000 !important; /* Section Heading to Black */ font-family: var(--heading-font) !important; text-transform: uppercase !important; padding-left: 5% !important; text-align: left !important; font-size: 2rem !important; margin-bottom: 25px !important; margin-top: 40px !important; } /* Tile Titles to Black */ .tile__heading, .tile__title, [class*="upsell"] [class*="title"], [class*="recommendations"] [class*="title"], [class*="RelatedProducts"] [class*="title"] { color: #000000 !important; font-family: var(--heading-font) !important; font-weight: 600 !important; font-size: 1.2rem !important; text-align: center !important; text-transform: uppercase !important; margin-top: 15px !important; line-height: 1.4 !important; letter-spacing: 0.02em !important; } /* Tile Prices & Descriptions to Black */ .tile__description, .tile__price, [class*="upsell"] [class*="price"], [class*="recommendations"] [class*="price"], [class*="RelatedProducts"] [class*="price"] { text-align: center !important; color: #000000 !important; font-family: 'Poppins', sans-serif !important; line-height: 1.6 !important; margin-top: 5px !important; } .tile__price span, [class*="upsell"] [class*="price"] span, [class*="recommendations"] [class*="price"] span { color: #000000 !important; font-weight: 500 !important; } /* Change tile border to Black to pop against the Pink */ .tile__image-wrapper, [class*="upsell"] [class*="image"], [class*="recommendations"] [class*="image"] { overflow: hidden !important; border-bottom: 1px solid #000000 !important; } /* --- 3. MAIN PRODUCT INFO (STAYS PINK ON BLACK) --- */ .product-info__title, h2.product-info__title, h1.product-title { color: #ffa0c8 !important; font-family: var(--heading-font) !important; text-align: left !important; font-size: 3.5rem !important; line-height: 1.25 !important; text-transform: uppercase !important; margin-top: 0 !important; margin-bottom: 2px !important; } .product-info__price, .product-info__price span { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; font-size: 1.5rem !important; font-weight: 500 !important; text-align: left !important; margin-bottom: 15px !important; display: block !important; } /* SECTION: Description */ .product-info__description { font-family: 'Poppins', sans-serif !important; color: #ffffff !important; line-height: 1.6 !important; margin-top: 10px !important; padding-top: 20px !important; padding-bottom: 20px !important; border-top: 1px solid #222222 !important; border-bottom: 1px solid #222222 !important; width: 100% !important; } /* --- 4. LAYOUT ALIGNMENT (5% BRAND MARGIN) --- */ .product-info { padding-left: 5% !important; padding-right: 5% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } /* --- 5. BUTTONS & STICKY DOCK --- */ [class*="StickyActions"], [class*="ProductStickyFooter"], .product-info__sticky-actions { background-color: #000000 !important; position: fixed !important; bottom: 0 !important; z-index: 99999 !important; border-top: 1px solid #222222 !important; } button[class*="Button"], .product-info__actions button { background-color: #ffa0c8 !important; color: #000000 !important; font-family: 'Poppins', sans-serif !important; font-weight: 800 !important; text-transform: uppercase !important; border-radius: 4px !important; margin-top: 15px !important; } /* --- 6. MOBILE RESPONSIVENESS --- */ @media screen and (max-width: 768px) { .product-info__title { font-size: 2.2rem !important; } } /* --- 7. FINAL BLACK GUARD --- */ body::after { content: "" !important; position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: env(safe-area-inset-bottom) !important; background: #000000 !important; z-index: 999999 !important; pointer-events: none !important; } } #fw-section-password { --color-primary: #ff9fca; --color-primary-rgb: 255, 159, 202; --color-background: #161616; --color-background-rgb: 22, 22, 22; --color-on-background: #ff9fca; --color-on-background-rgb: 255, 159, 202; --color-on-primary: #161616; --color-on-primary-rgb: 22, 22, 22; --color-product-image-background: #ff9fca; --color-background-brightness: 22; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ff9fca; --primary-btn-text: #161616; --primary-btn-border-color: #ff9fca; --secondary-btn-bg: transparent; --secondary-btn-text: #ff9fca; --secondary-btn-border-color: #ff9fca; }