/* ====================================================================== CIMONE' GRINNAGE — MAIN WEBSITE STYLES ====================================================================== EASY EDIT GUIDE ---------------------------------------------------------------------- This stylesheet is organized into clearly labeled sections so you can quickly find what you want to change. MAIN IMAGE FILES USED BY THE WEBSITE: - images/background.png - images/cimone 4.png - images/youtube.png - images/podcast.png - images/familychannel.png - images/aboutme.png - images/connect.png - images/divider.png IMPORTANT: - Header/navigation = solid black - Hero = solid black - Rest of website = background.png - JADORE LIVE EDIT is NOT added yet ====================================================================== */ /* ====================================================================== SECTION 1 — BRAND COLORS + GLOBAL VARIABLES ====================================================================== */ :root { --black: #000000; --panel: #070707; --panel-2: #0b0b0b; --pink: #ff2384; --pink-bright: #ff0a87; --pink-soft: #ff5aa8; --teal: #11e3df; --white: #ffffff; --muted: #c8c8c8; --line: #222222; --max: 1530px; --glow-pink: 0 0 8px rgba(255, 35, 132, .72), 0 0 18px rgba(255, 35, 132, .42); --glow-teal: 0 0 8px rgba(17, 227, 223, .68), 0 0 18px rgba(17, 227, 223, .35); } /* ====================================================================== SECTION 2 — RESET + BASE STYLES ====================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 92px; background: var(--black); /* Website scrolls vertically only */ width: 100%; max-width: 100%; overflow-x: hidden; } body { margin: 0; min-height: 100vh; /* Prevent horizontal scrolling */ width: 100%; max-width: 100%; overflow-x: hidden; color: var(--white); font-family: "DM Sans", sans-serif; /* ---------------------------------------------------------- MAIN WEBSITE BACKGROUND ---------------------------------------------------------- The stone texture begins AFTER the hero because the hero itself is forced to solid black farther down this file. ---------------------------------------------------------- */ background-color: var(--black); background-image: linear-gradient( rgba(0, 0, 0, .28), rgba(0, 0, 0, .28) ), url("../images/background.png"); background-repeat: repeat-y; background-position: top center; background-size: 1920px auto; background-attachment: scroll; } a { color: inherit; text-decoration: none; } button { font: inherit; } img { display: block; max-width: 100%; } /* ====================================================================== SECTION 3 — HEADER / NAVIGATION ====================================================================== */ .site-header { position: sticky; top: 0; z-index: 80; display: grid; grid-template-columns: 220px 1fr auto auto; align-items: center; gap: 24px; min-height: 76px; padding: 10px clamp(24px, 4.2vw, 76px); /* KEEP HEADER SOLID BLACK */ background: #000 !important; background-image: none !important; border-bottom: 0; } /* Logo */ .brand { display: grid; color: var(--pink); font-family: "Bebas Neue", sans-serif; font-size: 34px; line-height: .86; letter-spacing: 1.4px; } .brand small { margin-top: 5px; color: var(--teal); font: 700 13px "DM Sans", sans-serif; letter-spacing: 5px; } /* Navigation links */ .nav { display: flex; justify-content: center; gap: 42px; font-size: 13px; font-weight: 600; text-transform: uppercase; } .nav a { position: relative; padding: 13px 1px 12px; } .nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px; background: var(--pink); transition: .22s ease; } .nav a:hover::after, .nav a.active::after { left: 0; right: 0; } .nav a.active { color: var(--pink); } /* Header social icons */ .header-socials { display: flex; align-items: center; gap: 23px; } .header-socials a { display: grid; place-items: center; color: var(--pink); font-size: 27px; transition: .2s ease; } .header-socials a:hover { color: var(--teal); transform: translateY(-2px); } /* Mobile menu button */ .menu-toggle { display: none; color: var(--white); background: none; border: 0; font-size: 30px; cursor: pointer; } /* Shopping cart button */ .cart-button { position: relative; border: 1px solid var(--teal); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; background: #050505; color: var(--teal); box-shadow: var(--glow-teal); font-size: 21px; cursor: pointer; } .cart-button span { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 99px; background: var(--pink); color: var(--white); font-size: 10px; font-weight: 800; } /* ====================================================================== SECTION 4 — HERO / TOP OF WEBSITE ====================================================================== */ .hero { position: relative; /* KEEP HERO SOLID BLACK */ background: #000 !important; background-image: none !important; border: 0; width: 100%; max-width: 100%; overflow: visible; } .hero-inner { position: relative; z-index: 2; width: min(var(--max), 100%); min-height: 640px; margin: 0 auto; padding: 10px clamp(28px, 4.3vw, 82px) 32px; display: grid; /* LEFT TEXT / CIMONE / RIGHT BUTTONS */ grid-template-columns: minmax(430px, .94fr) minmax(560px, 1.30fr) minmax(300px, .68fr); gap: 14px; align-items: center; } /* ---------------------------------------------------------------------- HERO LEFT TEXT ---------------------------------------------------------------------- */ .hero-copy { position: relative; z-index: 4; align-self: center; padding-top: 18px; } /* "Plus Size. Real Talk. Real Life." */ .hero-script { position: relative; width: max-content; max-width: 100%; margin: 0 0 13px; color: var(--teal); font: 400 clamp(24px, 2.1vw, 36px) / 1 "Allura", cursive; letter-spacing: .01em; white-space: nowrap; } /* Pink underline below cursive tagline */ .hero-script::after { content: ""; position: absolute; left: 28%; right: 6%; bottom: -7px; height: 3px; background: var(--pink); border-radius: 50%; transform: rotate(-.5deg); } /* Main headline */ .hero h1 { display: grid; gap: 0; margin: 25px 0 18px; font: 700 clamp(56px, 5.15vw, 88px) / .92 "Playfair Display", serif; letter-spacing: -.055em; } /* IMPORTANT: Keep these as separate spans in index.html: Hey Babes, I’m Cimone’ */ .hero h1 .hero-line-pink, .hero h1 .hero-line-teal { display: block; white-space: nowrap; } .hero h1 .hero-line-pink { color: var(--pink) !important; } .hero h1 .hero-line-teal { color: var(--teal) !important; } /* Hero paragraph */ .lead { max-width: 570px; margin: 0; color: #f0f0f0; font-size: 16px; line-height: 1.6; } .desktop-break { display: block; } /* ====================================================================== SECTION 5 — BUTTONS ====================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; padding: 15px 25px; border-radius: 3px; font-size: 13px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; transition: .2s ease; } .btn:hover { transform: translateY(-2px); } .btn-pink { border: 1px solid var(--pink); background: linear-gradient( 90deg, var(--pink), var(--pink-soft) ); color: var(--white); box-shadow: 0 0 15px rgba(255, 35, 132, .22); } .btn-outline { border: 1px solid var(--pink); background: transparent; color: var(--pink); } .wide { width: 100%; } /* ====================================================================== SECTION 6 — CIMONE HERO IMAGE ====================================================================== */ .hero-visual { position: relative; min-width: 0; min-height: 565px; align-self: end; display: flex; align-items: flex-end; justify-content: center; overflow: visible; isolation: isolate; } /* Cimone's finished PNG already includes: - paint splatter - stars - XO Cimone signature DO NOT add those separately in HTML. */ .hero-visual #hero-image { position: relative; z-index: 2; width: min(640px, 100%); max-width: 100%; max-height: 590px; object-fit: contain; object-position: center bottom; /* Move Cimone down slightly so the divider sits over the bottom edge */ transform: translateY(-24px); filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .85)); } /* ====================================================================== SECTION 7 — HERO QUICK-LINK BUTTONS ====================================================================== */ .hero-links { position: relative; z-index: 5; display: grid; gap: 14px; align-self: center; } /* Each button */ .hero-links > a { min-height: 84px; display: grid; grid-template-columns: 58px 1fr 22px; align-items: center; gap: 13px; padding: 10px 17px; border-radius: 8px; background: #000; transition: .2s ease; } /* PINK BUTTONS: 1 YouTube 3 Family Channel 5 Connect */ .hero-links > a:nth-child(1), .hero-links > a:nth-child(3), .hero-links > a:nth-child(5) { border: 1px solid var(--pink); box-shadow: var(--glow-pink); } /* TEAL BUTTONS: 2 Podcast 4 About Me */ .hero-links > a:nth-child(2), .hero-links > a:nth-child(4) { border: 1px solid var(--teal); box-shadow: var(--glow-teal); } .hero-links > a:hover { transform: translateX(-4px); background: #050505; } /* ---------------------------------------------------------------------- HERO QUICK-LINK PNG ICONS ---------------------------------------------------------------------- INDEX.HTML FILES SHOULD BE: YouTube: images/youtube.png Podcast: images/podcast.png Family Channel: images/familychannel.png About Me: images/aboutme.png Connect: images/connect.png ---------------------------------------------------------------------- */ .quick-icon { width: 58px; height: 58px; flex: 0 0 58px; display: flex; align-items: center; justify-content: center; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible; } .quick-icon-img { width: 54px; height: 54px; object-fit: contain; display: block; } .quick-icon.pink .quick-icon-img { filter: drop-shadow(0 0 5px rgba(255, 0, 119, .95)) drop-shadow(0 0 11px rgba(255, 0, 119, .65)); } .quick-icon.teal .quick-icon-img { filter: drop-shadow(0 0 5px rgba(0, 245, 238, .95)) drop-shadow(0 0 11px rgba(0, 245, 238, .65)); } /* Quick-link text */ .quick-copy { display: grid; gap: 2px; } .quick-copy strong { font-size: 14px; letter-spacing: .02em; text-transform: uppercase; } .quick-copy small { color: var(--white); font-size: 11px; } /* Right arrow */ .quick-arrow { justify-self: end; color: var(--pink); font-size: 23px; } .hero-links > a:nth-child(2) .quick-arrow, .hero-links > a:nth-child(4) .quick-arrow { color: var(--teal); } /* ====================================================================== SECTION 8 — HERO / BODY NEON GRUNGE DIVIDER ====================================================================== IMAGE FILE: images/divider.png GOAL: - Keep Cimone exactly where she is - Keep the Connect button exactly where it is - Place the divider UNDER the Connect button - Use the divider as the actual boundary between hero and body - Start the stone-texture body immediately underneath ====================================================================== */ /* Old CSS-generated divider stays disabled */ .torn-divider { display: none !important; } /* Repeating PNG divider */ .png-divider { position: absolute; left: 0; right: 0; /* Anchor divider to the actual bottom of the hero */ bottom: 0; width: 100%; height: 120px; z-index: 50; background-image: url("../images/divider.png"); background-repeat: repeat-x; background-position: left bottom; /* Repeat individual divider tiles instead of stretching one image */ background-size: 650px 120px; background-color: transparent; pointer-events: none; } /* ========================================================== ABOUT / STONE BACKGROUND OVERLAP ========================================================== IMPORTANT: The About section itself is transparent, so simply moving it upward still showed the HERO'S BLACK background through it. This pseudo-element creates a REAL full-width stone-texture layer and pulls that texture upward behind the divider. ========================================================== */ #about { position: relative; /* Pull the section upward slightly */ margin-top: -55px; /* Keep the actual About content comfortably below the divider */ padding-top: 135px; z-index: 1; isolation: isolate; } /* Full-width stone background that actually covers the black hero gap */ #about::before { content: ""; position: absolute; /* Extend upward behind the divider */ top: -25px; bottom: 0; /* Full browser width even though #about has a max-width */ left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background-color: #000; background-image: linear-gradient( rgba(0, 0, 0, .28), rgba(0, 0, 0, .28) ), url("../images/background.png"); background-repeat: repeat-y; background-position: top center; background-size: 1920px auto; pointer-events: none; } /* Old scroll/down arrow stays hidden */ .scroll-cue { display: none !important; } /* ====================================================================== SECTION 9 — GLOBAL CONTENT SECTION LAYOUT ====================================================================== */ main { width: 100%; max-width: 100%; background: transparent; } .section-shell { max-width: var(--max); margin: auto; padding: 64px clamp(24px, 5vw, 82px); /* Allows background.png to show */ background: transparent; } .section-kicker { margin: 0; color: var(--teal); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .center { text-align: center; } /* ====================================================================== SECTION 10 — ABOUT SECTION ====================================================================== */ .split-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; } .split-section h2, .content-section h2, .podcast-section h2, .shop-section h2, .gallery-section h2, .connect-section h2 { margin: 8px 0 18px; font: 700 clamp(34px, 4vw, 56px) "Playfair Display", serif; } .split-section h2 span { color: var(--pink); } .split-section p { color: var(--muted); line-height: 1.72; } /* About value box */ .values-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 22px; border: 1px solid var(--pink); border-radius: 9px; background: rgba(0, 0, 0, .70); box-shadow: var(--glow-pink); } .values-grid article { padding: 17px; display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; } .values-grid b { color: var(--teal); font-size: 39px; line-height: 1; } .values-grid article:nth-child(2) b, .values-grid article:nth-child(3) b { color: var(--pink); } .values-grid h3 { margin: 0 0 4px; font-size: 14px; text-transform: uppercase; } .values-grid p { margin: 0; color: var(--white); font-size: 13px; line-height: 1.45; } /* ====================================================================== SECTION 11 — YOUTUBE / FEATURE CARDS ====================================================================== */ .feature-grid { display: grid; gap: 18px; } .feature-grid.two { grid-template-columns: 1fr 1fr; } .feature-grid.three { grid-template-columns: repeat(3, 1fr); } .media-card, .book-card { padding: 18px; border: 1px solid #353535; border-radius: 9px; background: rgba(7, 7, 7, .92); } .media-card { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; } .media-placeholder { min-height: 140px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px solid var(--teal); background: radial-gradient( circle at 30% 30%, rgba(17, 227, 223, .25), transparent 55% ), #090909; font-weight: 800; text-transform: uppercase; } .media-placeholder i { color: var(--teal); font-size: 38px; } .media-placeholder.alt { border-color: var(--pink); background: radial-gradient( circle at 70% 30%, rgba(255, 35, 132, .28), transparent 55% ), #090909; } .media-placeholder.alt i { color: var(--pink); } /* ====================================================================== SECTION 12 — PODCAST ====================================================================== */ .podcast-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; } .episode-card { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 20px; border: 1px solid var(--pink); border-radius: 8px; background: rgba(0, 0, 0, .78); box-shadow: var(--glow-pink); } .podcast-cover { height: 220px; display: grid; place-items: center; background: linear-gradient( 145deg, #f32382, #8e124b ); font: 800 28px "DM Sans"; text-align: center; } .podcast-cover span { font: 700 32px "Playfair Display"; } /* ====================================================================== SECTION 13 — GOOGLE ADSENSE PLACEHOLDERS ====================================================================== */ .ad-wrap { max-width: 1300px; margin: 10px auto; padding: 12px 25px 28px; text-align: center; color: #777; } .adsense-slot { min-height: 120px; margin-top: 8px; display: grid; place-items: center; border: 1px dashed #444; background: rgba(5, 5, 5, .90); } /* ====================================================================== SECTION 14 — SHOP / COLLAPSIBLE COLLECTIONS ====================================================================== */ .shop-intro { margin-bottom: 34px; color: var(--muted); } .collection { margin-bottom: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(2, 2, 2, .95); } .collection-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 18px 20px; background: #060606; } .collection-head h3 { margin: 0; font: 700 34px "Playfair Display"; } .collection-head p { margin: 4px 0; color: var(--muted); font-size: 13px; } .collection-toggle { padding: 10px 15px; border: 1px solid var(--pink); border-radius: 5px; background: transparent; color: var(--pink); font-size: 12px; text-transform: uppercase; cursor: pointer; } /* Product grid */ .product-grid { display: grid; gap: 14px; padding: 18px; background: #000; } .product-card { overflow: hidden; border-radius: 7px; background: #f4f4f4; color: #111; } .product-image { aspect-ratio: 1.25; display: grid; place-items: center; overflow: hidden; background: linear-gradient( 135deg, #e7e7e7, #fff ); color: #777; font-weight: 700; } .product-image img { width: 100%; height: 100%; object-fit: cover; } .product-card .info { padding: 12px; } .product-card h4 { margin: 0 0 4px; } .price { font-weight: 800; } .add-btn { width: 100%; margin-top: 10px; padding: 10px; border: 0; border-radius: 3px; background: #080808; color: var(--white); cursor: pointer; } /* Extra products remain hidden until View All is clicked */ .product-card.is-extra { display: none; } .collection.expanded .product-card.is-extra { display: block; } /* ====================================================================== SECTION 15 — BOOKS + DIGITAL PRODUCTS ====================================================================== */ .book-card { text-align: center; } .book-cover { height: 210px; margin-bottom: 18px; display: grid; place-items: center; font-size: 26px; font-weight: 800; } .book-cover.dark { background: linear-gradient( 145deg, #333, #0b0b0b ); } .book-cover.peach { background: linear-gradient( 145deg, #ffc0a8, #ff7d8b ); color: #111; } .book-cover.teal { background: linear-gradient( 145deg, #14dddd, #083838 ); } /* ====================================================================== SECTION 16 — GALLERY / PHOTO SLIDESHOW ====================================================================== */ .gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow: auto; padding: 10px 0; scroll-snap-type: x mandatory; } .gallery-item { height: 250px; display: grid; place-items: center; scroll-snap-align: start; border: 1px solid #333; background: rgba(13, 13, 13, .92); color: #777; } /* ====================================================================== SECTION 17 — CONNECT SECTION ====================================================================== */ .connect-grid { max-width: 1100px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .connect-grid a { display: flex; justify-content: center; align-items: center; font-size: 12px; white-space: nowrap; min-width: 0; gap: 10px; padding: 17px; border: 1px solid var(--pink); background: rgba(0, 0, 0, .85); box-shadow: 0 0 16px rgba(255, 35, 132, .20); text-align: center; text-transform: uppercase; } .connect-grid a:nth-child(even) { border-color: var(--teal); box-shadow: 0 0 16px rgba(17, 227, 223, .20); } /* ====================================================================== SECTION 18 — FOOTER ====================================================================== */ footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 18px clamp(20px, 4vw, 60px); background: linear-gradient( 90deg, var(--teal) 0 72%, var(--pink) 72% ); color: #050505; font-size: 12px; } footer a { justify-self: end; font-weight: 800; } /* ====================================================================== SECTION 19 — CART DRAWER ====================================================================== */ .cart-drawer { position: fixed; top: 0; right: 0; z-index: 100; width: min(460px, 100%); height: 100vh; display: flex; flex-direction: column; border-left: 1px solid var(--pink); background: #080808; transform: translateX(105%); transition: .25s ease; } .cart-drawer.open { transform: none; } .cart-head { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #222; } .cart-head h2 { margin: 0; font: 700 32px "Playfair Display"; } .cart-head button { border: 0; background: none; color: var(--white); font-size: 35px; } .cart-items { flex: 1; padding: 20px; overflow: auto; } .cart-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 15px 0; border-bottom: 1px solid #222; } .cart-row small { color: var(--muted); } .qty { display: flex; align-items: center; gap: 8px; } .qty button { width: 28px; height: 28px; border: 1px solid #333; background: #111; color: var(--white); } .remove { padding: 0; border: 0; background: none; color: var(--pink); } .cart-summary { padding: 20px; border-top: 1px solid #222; } .cart-summary > div { display: flex; justify-content: space-between; font-size: 20px; } .cart-summary p { color: var(--muted); font-size: 12px; } .drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .65); opacity: 0; pointer-events: none; transition: .2s; } .drawer-backdrop.show { opacity: 1; pointer-events: auto; } /* ====================================================================== SECTION 20 — TABLET RESPONSIVE ====================================================================== */ @media (max-width: 1180px) { .site-header { grid-template-columns: auto 1fr auto; gap: 18px; } .header-socials { display: none; } .nav { gap: 20px; } /* Hero becomes two columns */ .hero-inner { grid-template-columns: 1fr .9fr; min-height: auto; padding-top: 45px; } .hero-copy { padding-bottom: 50px; } .hero-links { grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); padding-bottom: 42px; } .hero-links > a { grid-template-columns: 44px 1fr; min-height: 72px; padding: 10px; } .quick-icon { width: 40px; height: 40px; flex-basis: 40px; } .quick-icon-img { width: 38px; height: 38px; } .quick-arrow { display: none; } .hero-visual #hero-image { max-height: 520px; transform: translateY(-12px); } } /* ====================================================================== SECTION 21 — MOBILE / SMALL TABLET ====================================================================== */ @media (max-width: 900px) { /* Header */ .menu-toggle { display: block; justify-self: end; } .site-header { grid-template-columns: auto 1fr auto; } .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; gap: 0; padding: 10px 24px 18px; border-top: 1px solid #171717; background: #050505; } .nav.open { display: flex; } .nav a { padding: 12px; } /* Hero */ .hero-inner { grid-template-columns: 1fr; padding-top: 34px; } .hero-copy { padding-bottom: 0; text-align: center; } .hero-script { margin-left: auto; margin-right: auto; white-space: normal; font-size: 32px; } .hero h1 { font-size: clamp(52px, 10vw, 76px); } .hero h1 .hero-line-pink, .hero h1 .hero-line-teal { white-space: normal; } .lead { margin-inline: auto; } .desktop-break { display: none; } .hero-visual { min-height: 480px; } .hero-visual #hero-image { width: auto; max-height: 500px; transform: translateY(-10px); } .hero-links { grid-template-columns: 1fr 1fr; } .hero-links > a:last-child { grid-column: 1 / -1; } /* About / Podcast */ .split-section, .podcast-section { grid-template-columns: 1fr; } /* Books */ .feature-grid.three { grid-template-columns: 1fr 1fr; } /* Products */ .product-grid { grid-template-columns: repeat(2, 1fr); } } /* ====================================================================== SECTION 22 — PHONE RESPONSIVE ====================================================================== */ @media (max-width: 620px) { body { background-size: 1400px auto; } /* Header */ .site-header { min-height: 74px; padding: 10px 16px; } .brand { font-size: 29px; } .brand small { font-size: 10px; letter-spacing: 4px; } .cart-button { width: 42px; height: 42px; font-size: 19px; } /* Sections */ .section-shell { padding: 52px 18px; } /* Hero */ .hero-inner { padding: 30px 18px 34px; } .hero-script { font-size: 28px; } .hero h1 { font-size: 52px; line-height: .98; } .lead { font-size: 15px; } .hero-visual { min-height: 410px; } .hero-visual #hero-image { max-height: 425px; transform: translateY(-8px); } .hero-links { grid-template-columns: 1fr; } .hero-links > a:last-child { grid-column: auto; } /* Repeating PNG neon divider on phones */ .png-divider { bottom: 0; height: 90px; background-size: 440px 90px; } #about { margin-top: -40px; padding-top: 120px; } #about::before { top: -40px; background-size: 1400px auto; } /* Values */ .values-grid { grid-template-columns: 1fr; padding: 12px; } /* Media + books */ .feature-grid.two, .feature-grid.three { grid-template-columns: 1fr; } .media-card { grid-template-columns: 1fr; } .episode-card { grid-template-columns: 1fr; } /* Shop */ .product-grid { grid-template-columns: 1fr 1fr; } .collection-head { flex-direction: column; align-items: flex-start; } /* Connect */ .connect-grid { grid-template-columns: 1fr 1fr; } /* Gallery */ .gallery-track { grid-auto-columns: 78%; } /* Footer */ footer { grid-template-columns: 1fr; text-align: center; background: linear-gradient( 180deg, var(--teal) 0 72%, var(--pink) 72% ); } footer a { justify-self: center; } } /* ====================================================================== 2026-09 — ABOUT + MY STORY POLISH ====================================================================== */ /* ------------------------------ TOP ABOUT SECTION ------------------------------ */ #about .about-heading { margin: 8px 0 18px; font-family: "Playfair Display", serif; font-size: clamp(36px, 3.45vw, 50px); font-weight: 700; line-height: 1.02; letter-spacing: -.025em; white-space: nowrap; } #about .about-heading span { color: var(--pink); } #about .about-heading .about-heart { color: var(--white); font-weight: 400; } .about-intro > p:not(.section-kicker) { max-width: 650px; } .about-facts-card { padding: 24px; border: 1px solid var(--pink); border-radius: 10px; background: radial-gradient(circle at 88% 10%, rgba(255, 35, 132, .13), transparent 34%), rgba(0, 0, 0, .78); box-shadow: var(--glow-pink); } .about-facts-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 4px 17px; margin-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.10); } .about-facts-heading > span { color: var(--pink); font-size: 30px; line-height: 1; } .about-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .about-facts-grid article { min-height: 102px; padding: 19px 10px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; } .about-facts-grid article:nth-child(odd) { padding-right: 22px; } .about-facts-grid article:nth-child(even) { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.08); } .about-facts-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); } .fact-icon { display: grid; place-items: center; width: 42px; height: 42px; font-size: 28px; line-height: 1; } .fact-icon.pink { color: var(--pink); } .fact-icon.teal { color: var(--teal); } .about-facts-grid h3 { margin: 0 0 4px; color: var(--white); font-size: 13px; letter-spacing: .035em; text-transform: uppercase; } .about-facts-grid p { margin: 0; color: var(--white); font-size: 12.5px; line-height: 1.45; } .about-facts-tagline { margin-top: 4px; padding: 14px 12px 2px; border-top: 1px solid rgba(255,255,255,.10); color: var(--pink); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-align: center; text-transform: uppercase; } /* ------------------------------ MY STORY SECTION ------------------------------ */ .my-story-section { scroll-margin-top: 90px; display: grid; grid-template-columns: minmax(300px, 500px) minmax(0, 1fr); gap: clamp(38px, 6vw, 88px); align-items: center; padding-top: 76px; padding-bottom: 76px; } /* IMPORTANT: The portrait itself is about 2:3, so the frame follows that shape. This removes the unnecessary black area around it. */ .my-story-photo-frame { position: relative; width: 100%; max-width: 500px; aspect-ratio: 2 / 3; min-height: 0 !important; height: auto; overflow: hidden; border: 1px solid var(--pink); border-radius: 12px; background: #000; box-shadow: 0 0 8px rgba(255, 35, 132, .72), 0 0 18px rgba(255, 35, 132, .42); } /* Disable the old giant CIMONE watermark behind the portrait. */ .my-story-photo-frame::before { display: none; } .my-story-photo-frame img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; filter: none; } .story-photo-label { position: absolute; z-index: 3; right: 20px; bottom: 18px; color: var(--teal); font: 400 30px/1 "Allura", cursive; transform: rotate(-4deg); text-shadow: 0 0 10px rgba(17,227,223,.28); } .my-story-copy h2 { margin: 8px 0 23px; color: var(--white); font: 700 clamp(40px, 4.3vw, 64px) / .98 "Playfair Display", serif; letter-spacing: -.035em; } .my-story-copy h2 span { color: var(--pink); } .my-story-copy p { max-width: 760px; margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.78; } .my-story-copy .story-lead { color: var(--white); font-size: 18px; font-weight: 600; line-height: 1.58; } .my-story-signoff { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; align-items: end; justify-content: space-between; gap: 20px; } .my-story-signoff span { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .my-story-signoff strong { color: var(--pink); font: 400 34px/1 "Allura", cursive; } /* ------------------------------ TABLET ------------------------------ */ @media (max-width: 980px) { #about .about-heading { white-space: normal; } .about-facts-grid { grid-template-columns: 1fr; } .about-facts-grid article, .about-facts-grid article:nth-child(odd), .about-facts-grid article:nth-child(even) { padding: 16px 8px; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.08); } .about-facts-grid article:last-child { border-bottom: 0; } .my-story-section { grid-template-columns: 1fr; } .my-story-photo-frame { width: min(100%, 500px); margin: 0 auto; aspect-ratio: 2 / 3; min-height: 0 !important; } } /* ------------------------------ PHONE ------------------------------ */ @media (max-width: 640px) { #about .about-heading { font-size: clamp(32px, 10vw, 43px); } .my-story-section { padding-top: 52px; padding-bottom: 52px; } .my-story-photo-frame { width: 100%; max-width: 440px; aspect-ratio: 2 / 3; min-height: 0 !important; } .my-story-photo-frame img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; } .my-story-signoff { align-items: flex-start; flex-direction: column; } } /* ========================================================== YOUTUBE CARDS — WIDER THUMBNAILS ========================================================== */ #watch .media-card { display: grid; /* thumbnail width | text takes remaining space */ grid-template-columns: 300px 1fr; gap: 24px; align-items: center; } #watch .media-image-card { width: 300px; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; border-radius: 6px; } #watch .media-image-card img { width: 100%; height: 100%; min-height: 0; display: block; object-fit: cover; object-position: center; } /* Tablet / smaller screens */ @media (max-width: 1100px) { #watch .media-card { grid-template-columns: 220px 1fr; } #watch .media-image-card { width: 220px; } } /* Phones */ @media (max-width: 700px) { #watch .feature-grid.two { grid-template-columns: 1fr; } #watch .media-card { grid-template-columns: 1fr; } #watch .media-image-card { width: 100%; } } /* ========================================================== PODCAST SECTION ========================================================== */ #podcast { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 70px; align-items: center; } /* LEFT */ .podcast-intro h2 { margin: 10px 0 18px; } .podcast-intro > p:not(.section-kicker) { margin-bottom: 32px; } .podcast-intro .btn { margin-top: 8px; } /* FEATURED EPISODE CARD */ #podcast .episode-card { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; padding: 20px; background: rgba(5, 5, 5, 0.88); border: 1px solid #ff087f; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 8, 127, 0.45), inset 0 0 25px rgba(255, 8, 127, 0.04); } /* PODCAST ARTWORK */ .podcast-cover-image { width: 240px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; } .podcast-cover-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* EPISODE INFORMATION */ .episode-info { min-width: 0; } .episode-info .section-kicker { display: block; margin-bottom: 14px; } .episode-info h3 { margin: 0 0 16px; color: #fff; font-size: 1.2rem; line-height: 1.35; } .episode-info p { margin: 0 0 22px; color: rgba(255, 255, 255, 0.78); line-height: 1.6; } /* LISTEN TO EPISODE LINK */ .episode-link { display: inline-flex; align-items: center; gap: 10px; color: #ff087f; font-size: 0.82rem; font-weight: 800; text-decoration: none; text-transform: uppercase; transition: color 0.2s ease, gap 0.2s ease; } .episode-link:hover { color: #00e6e6; gap: 14px; } /* TABLET */ @media (max-width: 1000px) { #podcast { grid-template-columns: 1fr; gap: 35px; } } /* MOBILE */ @media (max-width: 650px) { #podcast .episode-card { grid-template-columns: 1fr; } .podcast-cover-image { width: 100%; max-width: 320px; margin: 0 auto; } } /* ========================================================== MOMENTS THAT MATTER — PHOTO GALLERY ========================================================== */ .gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 14px; overflow-x: auto; padding: 12px 0 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; } /* PHOTO CARD */ .gallery-item { position: relative; width: 240px; height: 300px; margin: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--pink); border-radius: 8px; background: #080808; box-shadow: 0 0 12px rgba(255, 35, 132, .18); transition: transform .25s ease, box-shadow .25s ease; } /* Alternate teal borders */ .gallery-item:nth-child(even) { border-color: var(--teal); box-shadow: 0 0 12px rgba(17, 227, 223, .18); } /* IMAGE */ .gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .35s ease; } /* HOVER */ .gallery-item:hover { transform: translateY(-6px); } .gallery-item:hover img { transform: scale(1.05); } /* MOBILE */ @media (max-width: 700px) { .gallery-track { grid-auto-columns: 78%; } .gallery-item { width: 100%; height: 360px; } } /* ========================================================== CONNECT + COLLABORATE ========================================================== */ .connect-section { text-align: center; } .connect-intro { max-width: 650px; margin: 0 auto 32px; color: var(--muted); line-height: 1.65; } /* SOCIAL BUTTONS */ .connect-grid { max-width: 980px; margin: 0 auto; display: grid; gap: 16px; } .connect-grid a { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--pink); background: rgba(0, 0, 0, .86); color: #fff; font-weight: 700; text-transform: uppercase; transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; } /* alternating teal */ .connect-grid a:nth-child(even) { border-color: var(--teal); } .connect-grid a:hover { transform: translateY(-4px); background: #050505; box-shadow: 0 0 18px rgba(255, 35, 132, .24); } .connect-grid a:nth-child(even):hover { box-shadow: 0 0 18px rgba(17, 227, 223, .24); } .connect-grid i { font-size: 18px; } /* COLLABORATION BOX */ .collab-box { max-width: 980px; margin: 34px auto 0; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 35px; text-align: left; border: 1px solid var(--pink); border-radius: 10px; background: radial-gradient( circle at 90% 15%, rgba(255, 35, 132, .13), transparent 35% ), rgba(0, 0, 0, .86); box-shadow: 0 0 18px rgba(255, 35, 132, .22); } .collab-kicker { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .collab-box h3 { margin: 7px 0 8px; font: 700 28px "Playfair Display", serif; } .collab-box p { max-width: 620px; margin: 0; color: var(--muted); line-height: 1.55; } .collab-box .btn { flex-shrink: 0; margin-top: 0; } /* MOBILE */ @media (max-width: 850px) { .connect-grid { grid-template-columns: 1fr 1fr; } .collab-box { flex-direction: column; align-items: flex-start; } } @media (max-width: 520px) { .connect-grid { grid-template-columns: 1fr; } } /* ========================================================== BOOKS + DIGITAL ========================================================== */ .books-section { padding-top: 70px; padding-bottom: 80px; } /* ---------- HEADING ---------- */ .books-heading { text-align: center; margin-bottom: 34px; } .books-heading h2 { margin-bottom: 10px; } .books-subtitle { max-width: 650px; margin: 0 auto; color: var(--muted); line-height: 1.6; } /* ========================================================== BOOK GRID ========================================================== */ .books-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* ========================================================== BOOK CARD ========================================================== */ .book-card { position: relative; display: flex; flex-direction: column; padding: 22px; overflow: hidden; background: linear-gradient( 145deg, rgba(10, 10, 10, .97), rgba(0, 0, 0, .94) ); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } /* Pink accent */ .book-card:nth-child(odd) { border-color: rgba(255, 35, 132, .45); } /* Teal accent */ .book-card:nth-child(even) { border-color: rgba(17, 227, 223, .45); } .book-card:hover { transform: translateY(-7px); border-color: var(--pink); box-shadow: 0 14px 35px rgba(0,0,0,.45), 0 0 20px rgba(255,35,132,.15); } .book-card:nth-child(even):hover { border-color: var(--teal); box-shadow: 0 14px 35px rgba(0,0,0,.45), 0 0 20px rgba(17,227,223,.15); } /* ========================================================== PRODUCT IMAGE AREA ========================================================== */ .book-image-wrap { height: 355px; display: flex; align-items: center; justify-content: center; padding: 15px; margin-bottom: 22px; overflow: hidden; background: radial-gradient( circle at center, rgba(255,255,255,.07), transparent 65% ); border-radius: 7px; } .book-image { display: block; width: auto; max-width: 100%; height: 100%; max-height: 325px; object-fit: contain; filter: drop-shadow(0 15px 16px rgba(0,0,0,.5)); transition: transform .3s ease; } .book-card:hover .book-image { transform: scale(1.035); } /* ========================================================== BOOK INFORMATION ========================================================== */ .book-content { flex: 1; display: flex; flex-direction: column; text-align: center; } .book-type { display: block; margin-bottom: 9px; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .book-card:nth-child(even) .book-type { color: var(--pink); } .book-content h3 { margin: 0 0 12px; color: #fff; font-size: 20px; line-height: 1.25; } .book-content h3 span { display: block; } .book-content p { max-width: 340px; margin: 0 auto 24px; color: var(--muted); line-height: 1.55; } /* ========================================================== BUTTONS ========================================================== */ .book-button { align-self: center; margin-top: auto; min-width: 190px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; } .book-button i { transition: transform .2s ease; } .book-button:hover i { transform: translateX(5px); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1000px) { .books-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .books-section { padding-top: 55px; padding-bottom: 60px; } .books-grid { grid-template-columns: 1fr; } .book-card { max-width: 470px; width: 100%; margin: 0 auto; } .book-image-wrap { height: 330px; } .book-image { max-height: 300px; } } /* ======================================== BOOKS & DIGITAL — LARGE SECTION HEADING ======================================== */ #books h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 4.5vw, 4.75rem); font-weight: 700; line-height: 0.95; color: #ffffff; text-align: center; margin: 8px 0 14px; letter-spacing: -2px; } #books .section-kicker { text-align: center; color: #18d4d4; font-size: 0.9rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } #books > p:not(.section-kicker) { text-align: center; font-size: 1rem; color: #bdbdbd; margin-top: 0; } @media (max-width: 768px) { #books h2 { font-size: clamp(2.7rem, 12vw, 4rem); letter-spacing: -1px; } } /* ========================================================= YOUTUBE CHANNEL CARDS — NEON BORDERS ========================================================= */ /* MAIN CHANNEL — PINK */ #watch .media-card:first-child { border: 1.5px solid #ff0a78; box-shadow: 0 0 6px rgba(255, 10, 120, 0.75), 0 0 16px rgba(255, 10, 120, 0.35), inset 0 0 8px rgba(255, 10, 120, 0.08); } /* FAMILY CHANNEL — TEAL */ #watch .media-card:nth-child(2) { border: 1.5px solid #00e7e7; box-shadow: 0 0 6px rgba(0, 231, 231, 0.75), 0 0 16px rgba(0, 231, 231, 0.35), inset 0 0 8px rgba(0, 231, 231, 0.08); } /* ========================================================= MOMENTS THAT MATTER — CLICK TO EXPAND PHOTOS ========================================================= */ .gallery-item { cursor: pointer; } .gallery-item img { transition: transform 0.25s ease, filter 0.25s ease; } .gallery-item:hover img { transform: scale(1.03); filter: brightness(1.08); } /* FULL SCREEN LIGHTBOX */ .gallery-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(0, 0, 0, 0.92); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } /* OPEN STATE */ .gallery-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; } /* LARGE PHOTO */ .gallery-lightbox img { display: block; max-width: min(1100px, 92vw); max-height: 88vh; object-fit: contain; border-radius: 10px; border: 2px solid #ff0a78; box-shadow: 0 0 10px rgba(255, 10, 120, 0.8), 0 0 30px rgba(255, 10, 120, 0.4); transform: scale(0.94); transition: transform 0.25s ease; } .gallery-lightbox.open img { transform: scale(1); } /* CLOSE BUTTON */ .gallery-lightbox-close { position: absolute; top: 24px; right: 30px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid #00e7e7; border-radius: 50%; background: #000; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; box-shadow: 0 0 8px rgba(0, 231, 231, 0.8), 0 0 20px rgba(0, 231, 231, 0.4); } /* MOBILE */ @media (max-width: 700px) { .gallery-lightbox { padding: 20px; } .gallery-lightbox img { max-width: 94vw; max-height: 82vh; } .gallery-lightbox-close { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 28px; } } /* ========================================================= MONE'S CURVY CLOSET — MAILING LIST POPUP PHOTO + SIGNUP VERSION ========================================================= */ /* ========================================================= FULL SCREEN OVERLAY ========================================================= */ .mailing-popup { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.84); backdrop-filter: blur(7px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } /* POPUP IS VISIBLE */ .mailing-popup.open { opacity: 1; visibility: visible; pointer-events: auto; } /* ========================================================= MAIN POPUP CARD LEFT = PHOTO RIGHT = SIGNUP FORM ========================================================= */ .mailing-popup-card { position: relative; width: min(940px, 94vw); min-height: 530px; display: grid; grid-template-columns: 46% 54%; padding: 0; overflow: hidden; background: #050505; border: 1.5px solid #ff0a78; border-radius: 18px; box-shadow: 0 0 8px rgba(255, 10, 120, 0.9), 0 0 25px rgba(255, 10, 120, 0.45), 0 0 55px rgba(0, 231, 231, 0.15); transform: translateY(20px) scale(0.97); transition: transform 0.3s ease; } .mailing-popup.open .mailing-popup-card { transform: translateY(0) scale(1); } /* ========================================================= LEFT SIDE — MAILING LIST IMAGE ========================================================= */ .mailing-popup-photo { position: relative; width: 100%; height: 100%; min-height: 530px; overflow: hidden; background: #000; } .mailing-popup-photo img { display: block; width: 100%; height: 100%; object-fit: cover; /* Change this if you need to reposition Cimone inside the photo. Examples: center center 40% center 30% center */ object-position: 60% center; } /* TEAL DIVIDER BETWEEN PHOTO + FORM */ .mailing-popup-photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: #00e7e7; box-shadow: 0 0 8px rgba(0, 231, 231, 0.9), 0 0 18px rgba(0, 231, 231, 0.55); pointer-events: none; } /* ========================================================= RIGHT SIDE — SIGNUP CONTENT ========================================================= */ .mailing-popup-content { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 60px 42px 42px; text-align: center; background: radial-gradient( circle at top right, rgba(255, 10, 120, 0.08), transparent 35% ), #050505; } /* ========================================================= CLOSE BUTTON ========================================================= */ .mailing-popup-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid #00e7e7; border-radius: 50%; background: #000; color: #fff; font-size: 27px; line-height: 1; cursor: pointer; box-shadow: 0 0 8px rgba(0, 231, 231, 0.8), 0 0 18px rgba(0, 231, 231, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .mailing-popup-close:hover { transform: scale(1.08); box-shadow: 0 0 10px rgba(0, 231, 231, 1), 0 0 24px rgba(0, 231, 231, 0.55); } /* ========================================================= SMALL TEAL LABEL ========================================================= */ .mailing-popup-kicker { margin: 0 0 10px; color: #00e7e7; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } /* ========================================================= MAIN HEADING ========================================================= */ .mailing-popup-card h2 { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 5vw, 4.4rem); line-height: 0.92; color: #fff; } .mailing-title-white { color: #fff; } .mailing-title-pink { color: #ff1493; } .mailing-title-heart { color: #00e7e7; } /* PINK ACCENT ON HEART */ .mailing-popup-card h2::first-letter { color: inherit; } /* ========================================================= DESCRIPTION ========================================================= */ .mailing-popup-copy { max-width: 470px; margin: 0 auto 27px; color: #f1f1f1; font-size: 14px; line-height: 1.7; } /* ========================================================= EMAIL FORM ========================================================= */ .mailing-popup-form { width: 100%; display: grid; gap: 13px; } /* EMAIL INPUT */ .mailing-popup-form input { width: 100%; min-height: 56px; padding: 0 17px; border: 1px solid #00e7e7; border-radius: 6px; outline: none; background: #080808; color: #fff; font: inherit; box-shadow: inset 0 0 10px rgba(0, 231, 231, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .mailing-popup-form input:focus { border-color: #00e7e7; box-shadow: 0 0 7px rgba(0, 231, 231, 0.75), 0 0 17px rgba(0, 231, 231, 0.28); } .mailing-popup-form input::placeholder { color: #999; } /* ========================================================= JOIN THE LIST BUTTON ========================================================= */ .mailing-popup-submit { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; cursor: pointer; } /* ========================================================= NO THANKS ========================================================= */ .mailing-popup-skip { margin-top: 18px; border: 0; background: transparent; color: #aaa; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; transition: color 0.2s ease; } .mailing-popup-skip:hover { color: #fff; } /* ========================================================= SUCCESS MESSAGE ========================================================= */ .mailing-popup-success { margin: 20px 0 0; color: #00e7e7; font-size: 16px; font-weight: 700; } /* ========================================================= ACCESSIBILITY LABEL ========================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================= TABLET / MOBILE Photo moves ABOVE the signup form. ========================================================= */ @media (max-width: 700px) { .mailing-popup { padding: 14px; } .mailing-popup-card { width: min(430px, 96vw); min-height: 0; display: block; max-height: 94vh; overflow-y: auto; overflow-x: hidden; } /* PHOTO ACROSS TOP */ .mailing-popup-photo { width: 100%; height: 220px; min-height: 220px; } .mailing-popup-photo img { object-fit: cover; object-position: center 30%; } /* TEAL LINE MOVES TO BOTTOM OF PHOTO */ .mailing-popup-photo::after { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 2px; background: #00e7e7; } /* SIGNUP CONTENT */ .mailing-popup-content { padding: 34px 22px 30px; } .mailing-popup-card h2 { font-size: clamp(2.35rem, 11vw, 3.4rem); } .mailing-popup-copy { font-size: 14px; line-height: 1.55; } .mailing-popup-close { /* Keep X over the top-right corner of the card instead of burying it below the photo. */ position: fixed; top: auto; } } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 430px) { .mailing-popup-photo { height: 185px; min-height: 185px; } .mailing-popup-content { padding: 28px 18px 25px; } .mailing-popup-form input, .mailing-popup-submit { min-height: 52px; } } /* ========================================================= JADORE WEB STUDIO FOOTER CREDIT ========================================================= */ footer .jadore-credit { background: transparent !important; color: #000; display: flex; align-items: center; justify-content: flex-end; gap: 5px; width: 100%; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } footer .jadore-credit a { color: #fff; font-weight: 900; text-decoration: none; } footer .jadore-credit a:hover { color: #00e7e7; text-shadow: 0 0 6px rgba(0, 231, 231, 0.8), 0 0 14px rgba(0, 231, 231, 0.4); } /* ====================================================================== JADORE WEB STUDIO FINAL MOBILE POLISH — MONE'S CURVY CLOSET ====================================================================== */ /* ====================================================================== TABLET + MOBILE ====================================================================== */ @media (max-width: 900px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ .site-header { padding-left: 18px; padding-right: 18px; } .header-socials { display: none; } .nav { z-index: 9999; } /* ------------------------------------------------------ GENERAL SECTIONS ------------------------------------------------------ */ .section-shell { width: 100%; max-width: 100%; padding-left: 22px; padding-right: 22px; } .section-kicker { letter-spacing: .12em; } /* ------------------------------------------------------ HERO ------------------------------------------------------ */ .hero-inner { grid-template-columns: 1fr !important; gap: 20px; min-height: auto; } .hero-copy { order: 1; text-align: center; padding-bottom: 0; } .hero-visual { order: 2; width: 100%; } .hero-links { order: 3; grid-column: auto; width: 100%; } .hero-script { margin-left: auto; margin-right: auto; } .lead { max-width: 560px; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------ ABOUT ------------------------------------------------------ */ #about { width: 100%; } .about-grid, .split-section, .my-story-section { grid-template-columns: 1fr !important; } .about-copy { max-width: 650px; } .about-facts-card { width: 100%; } /* ------------------------------------------------------ YOUTUBE ------------------------------------------------------ */ #watch .feature-grid.two { grid-template-columns: 1fr; gap: 22px; } #watch .media-card { width: 100%; } /* ------------------------------------------------------ PODCAST ------------------------------------------------------ */ #podcast { grid-template-columns: 1fr !important; gap: 30px; } #podcast .episode-card { width: 100%; } /* ------------------------------------------------------ ADSENSE ------------------------------------------------------ */ .ad-wrap { width: calc(100% - 36px); margin-left: auto; margin-right: auto; } .adsense-slot { width: 100%; min-width: 0; } /* ------------------------------------------------------ BOOKS ------------------------------------------------------ */ .feature-grid.three { grid-template-columns: repeat(2, 1fr); gap: 18px; } /* ------------------------------------------------------ CONNECT ------------------------------------------------------ */ .connect-grid { grid-template-columns: repeat(2, 1fr); } /* ------------------------------------------------------ FOOTER ------------------------------------------------------ */ footer { grid-template-columns: 1fr !important; gap: 0; padding: 0; background: none !important; } footer > div { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 12px 18px; text-align: center; } footer > div:not(.jadore-credit) { background: var(--teal); } footer .jadore-credit { background: var(--pink) !important; justify-content: center !important; padding: 14px 18px; } } /* ====================================================================== PHONE ====================================================================== */ @media (max-width: 640px) { /* ------------------------------------------------------ BODY / SPACING ------------------------------------------------------ */ body { background-size: 1400px auto; } .section-shell { padding: 58px 18px; } /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ .site-header { min-height: 70px; padding: 10px 14px; } .brand { font-size: 27px; } .brand small { font-size: 9px; letter-spacing: 3.5px; } .cart-button { width: 42px; height: 42px; } /* ------------------------------------------------------ HERO COPY ------------------------------------------------------ */ .hero-inner { padding: 30px 18px 100px !important; } .hero-script { font-size: clamp(24px, 7vw, 30px); line-height: 1.15; } .hero h1 { font-size: clamp(48px, 14vw, 64px) !important; line-height: .92 !important; margin-top: 18px; } .lead { font-size: 15px; line-height: 1.6; padding: 0 4px; } .hero-copy .btn { width: auto; min-width: 190px; justify-content: center; } /* ------------------------------------------------------ CIMONE HERO IMAGE ------------------------------------------------------ */ .hero-visual { min-height: 390px !important; margin-top: -15px; } .hero-visual #hero-image { width: 100%; max-width: 500px; max-height: 430px !important; margin: 0 auto; object-fit: contain; transform: none !important; } /* ------------------------------------------------------ HERO QUICK LINKS ------------------------------------------------------ */ .hero-links { grid-template-columns: 1fr !important; gap: 11px; padding: 0 0 10px; } .hero-links > a { min-height: 72px; grid-template-columns: 54px 1fr auto !important; padding: 8px 14px; border-radius: 9px; } .quick-icon { width: 48px; height: 48px; flex-basis: 48px; } .quick-icon-img { width: 46px; height: 46px; } .quick-copy strong { font-size: 13px; } .quick-copy small { font-size: 10px; } .quick-arrow { font-size: 20px; } /* ------------------------------------------------------ NEON DIVIDER ------------------------------------------------------ */ .png-divider { height: 82px !important; bottom: 0 !important; background-size: 420px 82px !important; } /* ------------------------------------------------------ ABOUT ------------------------------------------------------ */ #about { margin-top: -35px; padding-top: 105px; } #about .about-heading { font-size: clamp(34px, 11vw, 45px); line-height: 1; } .about-copy p { font-size: 15px; line-height: 1.7; } .about-facts-grid { grid-template-columns: 1fr !important; } .about-facts-grid article { min-height: 110px; } /* ------------------------------------------------------ YOUTUBE ------------------------------------------------------ */ #watch h2 { font-size: clamp(42px, 12vw, 58px); } #watch .media-card { grid-template-columns: 1fr !important; gap: 18px; padding: 14px; } #watch .media-image-card { width: 100% !important; } #watch .media-card .btn { width: 100%; justify-content: center; } /* ------------------------------------------------------ PODCAST ------------------------------------------------------ */ #podcast { gap: 28px; } .podcast-intro { text-align: center; } .podcast-intro h2 { font-size: clamp(42px, 12vw, 58px); } .podcast-intro .btn { width: 100%; justify-content: center; } #podcast .episode-card { grid-template-columns: 1fr !important; padding: 16px; gap: 20px; } .podcast-cover-image { width: 100% !important; max-width: 320px; margin: 0 auto; } .episode-info { text-align: left; } .episode-info h3 { font-size: 17px; } /* ------------------------------------------------------ SHOP HEADING ------------------------------------------------------ */ #shop { padding-left: 12px; padding-right: 12px; } #shop > h2 { font-size: clamp(42px, 12vw, 58px) !important; line-height: .95; margin-bottom: 14px; } .shop-intro { padding: 0 10px; font-size: 14px; } /* ------------------------------------------------------ PRODUCT GRID Keep TWO PRODUCTS per row on normal phones. ------------------------------------------------------ */ .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } .product-card { min-width: 0; } .product-card img { width: 100%; height: auto; } .product-card h3 { font-size: 13px; } .product-card .price { font-size: 12px; } /* ------------------------------------------------------ BUTTONS / QUANTITY CONTROLS ------------------------------------------------------ */ .product-actions { gap: 5px; } .quantity-control, .qty-control { min-width: 0; } .add-to-cart, .add-cart { min-height: 38px; padding: 7px 7px; font-size: 9px; line-height: 1.1; } /* ------------------------------------------------------ BOOKS ------------------------------------------------------ */ .feature-grid.three { grid-template-columns: 1fr; } /* ------------------------------------------------------ GALLERY ------------------------------------------------------ */ .gallery-track { grid-auto-columns: 78%; gap: 12px; } .gallery-item { width: 100%; } /* ------------------------------------------------------ CONNECT ------------------------------------------------------ */ .connect-grid { grid-template-columns: 1fr 1fr; gap: 10px; } /* ------------------------------------------------------ MAILING LIST POPUP ------------------------------------------------------ */ .mailing-popup { padding: 10px; } .mailing-popup-card { width: min(430px, 96vw); max-height: 94vh; display: block; overflow-x: hidden; overflow-y: auto; } .mailing-popup-photo { height: 210px; min-height: 210px; } .mailing-popup-content { padding: 32px 20px 26px; } .mailing-popup-card h2 { font-size: clamp(38px, 12vw, 52px); } /* IMPORTANT: overrides the old broken mobile rule that made the X position:fixed. */ .mailing-popup-close { position: absolute !important; top: 12px !important; right: 12px !important; } /* ------------------------------------------------------ JADORE FOOTER ------------------------------------------------------ */ footer .jadore-credit { min-height: 52px; font-size: 10px; letter-spacing: .07em; flex-wrap: wrap; } } /* ====================================================================== EXTRA SMALL PHONES ====================================================================== */ @media (max-width: 390px) { .section-shell { padding-left: 14px; padding-right: 14px; } .hero-inner { padding-left: 14px !important; padding-right: 14px !important; } .hero h1 { font-size: 46px !important; } .hero-script { font-size: 24px; } .hero-visual { min-height: 350px !important; } .product-grid { gap: 6px; } .product-card h3 { font-size: 12px; } .connect-grid { grid-template-columns: 1fr; } .mailing-popup-photo { height: 180px; min-height: 180px; } } /* ========================================================= MONE — TIP JAR ========================================================= */ .tip-jar { max-width: 984px; margin: 18px auto 30px; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(0, 0, 0, .82); border: 1px solid var(--teal); border-radius: 10px; box-shadow: 0 0 10px rgba(17, 227, 223, .18), inset 0 0 10px rgba(17, 227, 223, .04); } .tip-jar-copy { display: flex; align-items: center; gap: 14px; } .tip-jar-kicker { color: var(--pink); font-size: 12px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; } .tip-jar-copy p { margin: 0; color: #fff; font-size: 13px; } .tip-jar-links { display: flex; align-items: center; gap: 10px; } .tip-jar-links a { min-width: 120px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: #000; font-size: 11px; font-weight: 800; text-transform: uppercase; text-decoration: none; transition: .2s ease; } .tip-cashapp { border: 1px solid var(--teal); } .tip-paypal { border: 1px solid var(--pink); } .tip-jar-links a:hover { transform: translateY(-2px); box-shadow: 0 0 14px rgba(255, 255, 255, .15); } /* MOBILE */ @media (max-width: 700px) { .tip-jar { flex-direction: column; text-align: center; } .tip-jar-copy { flex-direction: column; gap: 5px; } .tip-jar-links { width: 100%; } .tip-jar-links a { flex: 1; } } /* ========================================================= MONET'S CURVY CLOSET — COLLECTION COPY CONSISTENCY Same tagline size + same button spacing ========================================================= */ .mcc-collection-copy > p { font-size: 11px !important; line-height: 1.25 !important; font-weight: 600 !important; margin: 0 !important; } /* Equal space between tagline and SHOP button */ .mcc-collection-copy .mcc-outline-btn { margin-top: 22px !important; } /* Give Lash Out tagline a little breathing room */ .mcc-shop-row[data-category-row="lashes"] .mcc-collection-copy > p { margin-top: 10px !important; } /* ========================================================= MONET'S CURVY CLOSET — FINAL NEON ADD TO CART BUTTONS ========================================================= */ /* Base button styling */ .mcc-shop-row .mcc-add-btn { background: #000 !important; color: #fff !important; border-style: solid !important; border-width: 2px !important; border-radius: 3px !important; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* ========================================================= NO SHADE — HOT PINK ========================================================= */ .mcc-shop-row[data-category-row="sunglasses"] .mcc-add-btn { border-color: #ff0a78 !important; } .mcc-shop-row[data-category-row="sunglasses"] .mcc-add-btn:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 5px #ff0a78, 0 0 12px #ff0a78, 0 0 22px rgba(255, 10, 120, .85) !important; transform: translateY(-2px) !important; } /* ========================================================= CURVES IN COLOR — NEON TEAL ========================================================= */ .mcc-shop-row[data-category-row="dresses"] .mcc-add-btn { border-color: #00e7e7 !important; } .mcc-shop-row[data-category-row="dresses"] .mcc-add-btn:hover { background: #00e7e7 !important; border-color: #00e7e7 !important; color: #000 !important; box-shadow: 0 0 5px #00e7e7, 0 0 12px #00e7e7, 0 0 22px rgba(0, 231, 231, .85) !important; transform: translateY(-2px) !important; } /* ========================================================= LASH OUT — HOT PINK ========================================================= */ .mcc-shop-row[data-category-row="lashes"] .mcc-add-btn { border-color: #ff0a78 !important; } .mcc-shop-row[data-category-row="lashes"] .mcc-add-btn:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 5px #ff0a78, 0 0 12px #ff0a78, 0 0 22px rgba(255, 10, 120, .85) !important; transform: translateY(-2px) !important; } /* ========================================================= MONET'S CURVY CLOSET — ALL LASHES EXPANDED ADD TO CART BUTTONS Hot pink outline + neon hover ========================================================= */ /* Normal state */ .mcc-expander[data-expanded-collection="lashes"] .mcc-add-btn { background: #000 !important; color: #fff !important; border: 2px solid #ff0a78 !important; border-radius: 3px !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* Hover — LIGHT HER UP 💗 */ .mcc-expander[data-expanded-collection="lashes"] .mcc-add-btn:hover { background: #ff0a78 !important; color: #fff !important; border-color: #ff0a78 !important; box-shadow: 0 0 5px #ff0a78, 0 0 12px #ff0a78, 0 0 22px rgba(255, 10, 120, .85) !important; transform: translateY(-2px) !important; } /* ========================================================= MONET'S CURVY CLOSET — COLLECTION SHOP BUTTON NEON HOVER ========================================================= */ /* Smooth animation for all three */ .mcc-shop-row .mcc-outline-btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* ========================================================= NO SHADE — HOT PINK ========================================================= */ .mcc-shop-row[data-category-row="sunglasses"] .mcc-outline-btn:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 6px #ff0a78, 0 0 14px rgba(255, 10, 120, .85), 0 0 26px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } /* ========================================================= CURVES IN COLOR — NEON TEAL ========================================================= */ .mcc-shop-row[data-category-row="dresses"] .mcc-outline-btn:hover { background: #00e7e7 !important; border-color: #00e7e7 !important; color: #000 !important; box-shadow: 0 0 6px #00e7e7, 0 0 14px rgba(0, 231, 231, .85), 0 0 26px rgba(0, 231, 231, .55) !important; transform: translateY(-2px) !important; } /* ========================================================= LASH OUT — HOT PINK ========================================================= */ .mcc-shop-row[data-category-row="lashes"] .mcc-outline-btn:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 6px #ff0a78, 0 0 14px rgba(255, 10, 120, .85), 0 0 26px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } /* ========================================================= MONET'S CURVY CLOSET — BOOKS SECTION NEON DETAILS ========================================================= */ /* --------------------------------------------------------- COLORING BOOK CARD — NEON TEAL OUTLINE --------------------------------------------------------- */ .books-grid .book-card:nth-child(2) { border: 2px solid #00e7e7 !important; box-shadow: 0 0 5px rgba(0, 231, 231, .30), 0 0 12px rgba(0, 231, 231, .12) !important; } /* --------------------------------------------------------- ALL BOOK BUTTONS — SMOOTH HOVER --------------------------------------------------------- */ .books-grid .book-card a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* --------------------------------------------------------- EBOOK — HOT PINK --------------------------------------------------------- */ .books-grid .book-card:nth-child(1) a:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 6px #ff0a78, 0 0 14px rgba(255, 10, 120, .85), 0 0 26px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } /* --------------------------------------------------------- COLORING BOOK — NEON TEAL --------------------------------------------------------- */ .books-grid .book-card:nth-child(2) a { border-color: #00e7e7 !important; color: #00e7e7 !important; } .books-grid .book-card:nth-child(2) a:hover { background: #00e7e7 !important; border-color: #00e7e7 !important; color: #000 !important; box-shadow: 0 0 6px #00e7e7, 0 0 14px rgba(0, 231, 231, .85), 0 0 26px rgba(0, 231, 231, .55) !important; transform: translateY(-2px) !important; } /* --------------------------------------------------------- WEEKLY PLANNER — HOT PINK --------------------------------------------------------- */ .books-grid .book-card:nth-child(3) a:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 6px #ff0a78, 0 0 14px rgba(255, 10, 120, .85), 0 0 26px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } /* ========================================================= MONET'S CURVY CLOSET — CONNECT SECTION NEON HOVER EFFECTS ========================================================= */ /* --------------------------------------------------------- SOCIAL BUTTONS — SMOOTH TRANSITION --------------------------------------------------------- */ .connect-grid > a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* --------------------------------------------------------- PINK SOCIAL BUTTONS Instagram / YouTube / Amazon --------------------------------------------------------- */ .connect-grid > a:nth-child(1):hover, .connect-grid > a:nth-child(3):hover, .connect-grid > a:nth-child(5):hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 6px #ff0a78, 0 0 14px rgba(255, 10, 120, .85), 0 0 26px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } /* --------------------------------------------------------- TEAL SOCIAL BUTTONS TikTok / Facebook --------------------------------------------------------- */ .connect-grid > a:nth-child(2):hover, .connect-grid > a:nth-child(4):hover { background: #00e7e7 !important; border-color: #00e7e7 !important; color: #000 !important; box-shadow: 0 0 6px #00e7e7, 0 0 14px rgba(0, 231, 231, .85), 0 0 26px rgba(0, 231, 231, .55) !important; transform: translateY(-2px) !important; } /* Make icons follow the hover color */ .connect-grid > a:hover i, .connect-grid > a:hover span { color: inherit !important; } /* ========================================================= COLLAB — EMAIL ME ========================================================= */ .collab-box > a { transition: color .2s ease, text-shadow .2s ease, transform .2s ease !important; } .collab-box > a:hover { color: #ff0a78 !important; text-shadow: 0 0 5px #ff0a78, 0 0 12px rgba(255, 10, 120, .85), 0 0 22px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } .collab-box > a:hover i, .collab-box > a:hover span { color: inherit !important; } /* ========================================================= TIP JAR BUTTONS ========================================================= */ .tip-jar a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* CASH APP — TEAL */ .tip-jar a:first-of-type:hover { background: #00e7e7 !important; border-color: #00e7e7 !important; color: #000 !important; box-shadow: 0 0 6px #00e7e7, 0 0 14px rgba(0, 231, 231, .85), 0 0 26px rgba(0, 231, 231, .55) !important; transform: translateY(-2px) !important; } /* PAYPAL — HOT PINK */ .tip-jar a:last-of-type:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 6px #ff0a78, 0 0 14px rgba(255, 10, 120, .85), 0 0 26px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } /* Icons/text inherit hover color */ .tip-jar a:hover i, .tip-jar a:hover span { color: inherit !important; } /* ========================================================= MONET'S CURVY CLOSET — YOUTUBE WATCH NOW BUTTON GLOW ========================================================= */ /* BOTH WATCH NOW BUTTONS */ #watch .media-card .btn-outline { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* ========================================================= MAIN CHANNEL — HOT PINK ========================================================= */ #watch .media-card:nth-child(1) .btn-outline { border-color: #ff0a78 !important; color: #ff0a78 !important; } #watch .media-card:nth-child(1) .btn-outline:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 6px #ff0a78, 0 0 14px rgba(255, 10, 120, .85), 0 0 28px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } /* ========================================================= FAMILY CHANNEL — NEON TEAL ========================================================= */ #watch .media-card:nth-child(2) .btn-outline { border-color: #00e7e7 !important; color: #00e7e7 !important; } #watch .media-card:nth-child(2) .btn-outline:hover { background: #00e7e7 !important; border-color: #00e7e7 !important; color: #000 !important; box-shadow: 0 0 6px #00e7e7, 0 0 14px rgba(0, 231, 231, .85), 0 0 28px rgba(0, 231, 231, .55) !important; transform: translateY(-2px) !important; } /* Make the arrows follow the button color */ #watch .media-card .btn-outline i { color: inherit !important; } /* ========================================================= MONET'S CURVY CLOSET — ABOUT / READ MY STORY NEON HOVER ========================================================= */ #about .btn, #about .btn-outline { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } #about .btn:hover, #about .btn-outline:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 6px #ff0a78, 0 0 14px rgba(255, 10, 120, .85), 0 0 28px rgba(255, 10, 120, .55) !important; transform: translateY(-2px) !important; } /* Arrow follows the button */ #about .btn:hover i, #about .btn-outline:hover i { color: inherit !important; } /* ========================================================= MONET'S CURVY CLOSET — HERO QUICK LINKS NEON HOVER YouTube / Podcast / Family / About / Connect ========================================================= */ /* Smooth movement for all five cards */ .hero-links > a { transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important; } /* ========================================================= PINK CARDS YouTube / Family Channel / Connect ========================================================= */ .hero-links > a:nth-child(1):hover, .hero-links > a:nth-child(3):hover, .hero-links > a:nth-child(5):hover { background: rgba(255, 10, 120, .12) !important; border-color: #ff0a78 !important; box-shadow: 0 0 7px #ff0a78, 0 0 16px rgba(255, 10, 120, .80), 0 0 30px rgba(255, 10, 120, .45), inset 0 0 18px rgba(255, 10, 120, .10) !important; transform: translateX(5px) !important; } /* Pink arrows glow too */ .hero-links > a:nth-child(1):hover .quick-arrow, .hero-links > a:nth-child(3):hover .quick-arrow, .hero-links > a:nth-child(5):hover .quick-arrow { color: #ff0a78 !important; text-shadow: 0 0 5px #ff0a78, 0 0 12px #ff0a78 !important; transform: translateX(4px) !important; } /* ========================================================= TEAL CARDS Podcast / About Me ========================================================= */ .hero-links > a:nth-child(2):hover, .hero-links > a:nth-child(4):hover { background: rgba(0, 231, 231, .12) !important; border-color: #00e7e7 !important; box-shadow: 0 0 7px #00e7e7, 0 0 16px rgba(0, 231, 231, .80), 0 0 30px rgba(0, 231, 231, .45), inset 0 0 18px rgba(0, 231, 231, .10) !important; transform: translateX(5px) !important; } /* Teal arrows glow too */ .hero-links > a:nth-child(2):hover .quick-arrow, .hero-links > a:nth-child(4):hover .quick-arrow { color: #00e7e7 !important; text-shadow: 0 0 5px #00e7e7, 0 0 12px #00e7e7 !important; transform: translateX(4px) !important; } /* ========================================================= ICONS — BOOST THEIR EXISTING NEON GLOW ========================================================= */ .hero-links > a:hover .quick-icon { transform: scale(1.07) !important; } .hero-links > a:nth-child(1):hover .quick-icon, .hero-links > a:nth-child(3):hover .quick-icon, .hero-links > a:nth-child(5):hover .quick-icon { filter: drop-shadow(0 0 5px #ff0a78) drop-shadow(0 0 12px rgba(255, 10, 120, .85)) !important; } .hero-links > a:nth-child(2):hover .quick-icon, .hero-links > a:nth-child(4):hover .quick-icon { filter: drop-shadow(0 0 5px #00e7e7) drop-shadow(0 0 12px rgba(0, 231, 231, .85)) !important; } /* Smooth icon + arrow animation */ .hero-links .quick-icon, .hero-links .quick-arrow { transition: transform .22s ease, filter .22s ease, color .22s ease, text-shadow .22s ease !important; } /* ========================================================= MONET'S CURVY CLOSET — HERO GET TO KNOW ME NEON HOVER ========================================================= */ .hero-copy .btn, .hero-copy .btn-primary { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } .hero-copy .btn:hover, .hero-copy .btn-primary:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; box-shadow: 0 0 7px #ff0a78, 0 0 16px rgba(255, 10, 120, .90), 0 0 30px rgba(255, 10, 120, .65), 0 0 45px rgba(255, 10, 120, .35) !important; transform: translateY(-2px) scale(1.02) !important; } /* Make the arrow glow too */ .hero-copy .btn:hover i, .hero-copy .btn-primary:hover i { color: #fff !important; text-shadow: 0 0 5px #fff, 0 0 10px rgba(255,255,255,.75) !important; transform: translateX(4px) !important; } .hero-copy .btn i, .hero-copy .btn-primary i { transition: transform .2s ease, text-shadow .2s ease !important; } /* ========================================================= MONET'S CURVY CLOSET — PODCAST CTA NEON HOVER ========================================================= */ #podcast .btn, #podcast .btn-primary, #podcast .btn-outline { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } #podcast .btn:hover, #podcast .btn-primary:hover, #podcast .btn-outline:hover { background: #ff0a78 !important; border-color: #ff0a78 !important; color: #fff !important; box-shadow: 0 0 7px #ff0a78, 0 0 16px rgba(255, 10, 120, .90), 0 0 30px rgba(255, 10, 120, .65), 0 0 45px rgba(255, 10, 120, .35) !important; transform: translateY(-2px) scale(1.02) !important; } /* Arrow gets a little movement + glow */ #podcast .btn:hover i, #podcast .btn-primary:hover i, #podcast .btn-outline:hover i { color: #fff !important; text-shadow: 0 0 5px #fff, 0 0 10px rgba(255, 255, 255, .75) !important; transform: translateX(4px) !important; } #podcast .btn i, #podcast .btn-primary i, #podcast .btn-outline i { transition: transform .2s ease, text-shadow .2s ease !important; } /* ====================================================================== MONE'S CURVY CLOSET — FINAL MOBILE HERO DIVIDER Divider overlaps bottom edge of Cimone's hero artwork ====================================================================== */ @media (max-width: 640px) { /* Desktop divider stays hidden on phones */ .hero > .png-divider { display: none !important; } /* Hero artwork becomes anchor for mobile divider */ .hero-visual { position: relative !important; /* Space AFTER divider before quick links */ margin-bottom: 41px !important; } /* Mobile neon drip */ .hero-visual::after { content: ""; position: absolute !important; left: 50% !important; /* IMPORTANT: 0 = divider begins exactly at image bottom. Positive number pulls it UP over image. */ bottom: -41px !important; width: 100vw !important; height: 82px !important; transform: translateX(-50%) !important; background-image: url("../images/divider.png") !important; background-repeat: repeat-x !important; background-position: left bottom !important; background-size: 420px 82px !important; pointer-events: none !important; z-index: 20 !important; } /* Quick links begin beneath divider */ .hero-links { margin-top: 0 !important; } .hero-inner { padding-bottom: 34px !important; } #about { margin-top: 0 !important; padding-top: 70px !important; } } /* ========================================================= MONE'S CURVY CLOSET — MAILING LIST BUTTON NEON GLOW ========================================================= */ .mailing-popup button[type="submit"] { transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease !important; } .mailing-popup button[type="submit"]:hover, .mailing-popup button[type="submit"]:focus-visible { background: #ff0a78 !important; box-shadow: 0 0 7px #ff0a78, 0 0 16px rgba(255, 10, 120, .90), 0 0 30px rgba(255, 10, 120, .65), 0 0 45px rgba(255, 10, 120, .35) !important; transform: translateY(-2px) scale(1.02); } /* JADORE Live Edit v0.6 locked headline colors */ .my-story-copy h2 [data-live-field="story.headlineWhite"]{color:var(--white)!important;} .my-story-copy h2 [data-live-field="story.headlinePink"]{color:var(--pink)!important;} /* ========================================================= MAILING POPUP — MOBILE HEIGHT FIT (2026-09-26) Keeps desktop unchanged; reduces the mobile hero footprint so the full signup card fits comfortably in the viewport. ========================================================= */ @media (max-width: 700px) { .mailing-popup { padding: 10px; } .mailing-popup-card { max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; } .mailing-popup-photo { height: 170px; min-height: 170px; } .mailing-popup-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .mailing-popup-content { padding: 24px 20px 22px; } .mailing-popup-kicker { margin-bottom: 7px; } .mailing-popup-card h2 { margin-bottom: 13px; } .mailing-popup-copy { margin-bottom: 18px; line-height: 1.5; } .mailing-popup-skip { margin-top: 13px; margin-bottom: 2px; } } @media (max-width: 430px) { .mailing-popup-photo { height: 150px; min-height: 150px; } .mailing-popup-content { padding: 21px 16px 19px; } } /* v0.9.4 — Header logo: CLOSET fills the width of MONE’S CURVY */ .brand small { display: flex !important; width: 100% !important; align-items: center; justify-content: space-between; margin-top: 6px !important; color: var(--teal); font-family: "DM Sans", sans-serif !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; } .brand small b { font: inherit; color: inherit; } @media (max-width: 850px) { .brand small { font-size: 12px !important; } } @media (max-width: 560px) { .brand small { font-size: 11px !important; } } /* v0.9.5 — Keep CLOSET contained to the exact MONE’S CURVY wordmark width */ .brand { width: max-content !important; justify-self: start !important; } .brand small { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }