/* ========================================================================== Sweet Moans child theme ========================================================================== */ /* -------------------------------------------------------------------------- 1. Home banner — the parent theme gives .section.bg_dark 100px of vertical padding plus a 100px bottom margin (300px total), which pushed the gallery below the fold. Tightened on the home page only. Note: .qta is display:table, so flex properties do nothing here. The parent already centres .text_right below 1024px, so mobile centring needs no rule of its own — it just must not be overridden. -------------------------------------------------------------------------- */ body.home .section.bg_dark { padding: 12px 0; } body.home .section.bg_dark:not(:last-child) { margin-bottom: 18px; } body.home .section.bg_dark h3 { font-size: 15px; line-height: 1.35; margin: 0; } /* Compact pill button. */ body.home .section.bg_dark .btn { height: 42px; line-height: 40px; padding: 0 34px; border-radius: 999px; } /* Two buttons now share the banner (FEELS + FEATURE ME). They are inline blocks in a text_right cell, so spacing is margin, not gap. The cell is 30% by default, too narrow for both pills, so it gets more room and is told not to wrap. */ body.home .section.bg_dark .qta_30 { width: 44%; white-space: nowrap; } body.home .section.bg_dark .btn { padding: 0 24px; } body.home .section.bg_dark .btn + .btn { margin-left: 10px; } /* FEELS is the new page, so it gets the filled treatment. */ body.home .section.bg_dark .sm-btn-feels { background: #e0447c; border-color: #e0447c; color: #fff; } body.home .section.bg_dark .sm-btn-feels:hover { background: #c53367; border-color: #c53367; color: #fff; } @media (max-width: 1024px) { body.home .section.bg_dark .qta_70:not(:last-child) { margin-bottom: 12px; } } @media (max-width: 767px) { body.home .section.bg_dark { padding: 10px 0; } body.home .section.bg_dark h3 { font-size: 13px; } body.home .section.bg_dark .btn { height: 38px; line-height: 36px; padding: 0 28px; } body.home .section.bg_dark .btn + .btn { margin-left: 6px; } } /* -------------------------------------------------------------------------- 2. Age gate -------------------------------------------------------------------------- */ #sm-age-gate { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.94); backdrop-filter: blur(6px); padding: 20px; } /* Verified visitors (class set inline in ) never see it. */ html.sm-age-ok #sm-age-gate { display: none; } /* Freeze the page behind the gate until a choice is made. */ html:not(.sm-age-ok) body.sm-age-locked { overflow: hidden; } .sm-age-gate__box { max-width: 460px; width: 100%; text-align: center; color: #fff; background: #0b0b0b; border: 1px solid #262626; border-radius: 10px; padding: 36px 28px; } .sm-age-gate__logo img { max-width: 170px; height: auto; margin: 0 auto 18px; } .sm-age-gate__box h2 { color: #fff; font-size: 22px; margin: 0 0 12px; } .sm-age-gate__box p { color: #b9b9b9; font-size: 14px; line-height: 1.6; margin: 0 0 22px; } .sm-age-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .sm-age-gate__btn { flex: 1 1 140px; padding: 13px 22px; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 4px; border: 1px solid #fff; cursor: pointer; transition: opacity 0.2s ease; } .sm-age-gate__btn--yes { background: #fff; color: #000; } .sm-age-gate__btn--no { background: transparent; color: #fff; } .sm-age-gate__btn:hover { opacity: 0.75; } .sm-age-gate__fine { font-size: 11px; color: #6f6f6f; margin: 20px 0 0; } /* -------------------------------------------------------------------------- 3. Reels feed -------------------------------------------------------------------------- */ /* The feed owns the viewport: the theme's page padding would otherwise letterbox it inside the content column. */ body.sm-feels-page .site_content, body.sm-feels-page .inner_content { padding: 0 !important; margin: 0 !important; max-width: none !important; } .sm-reels { position: relative; height: 100vh; height: 100dvh; overflow-y: scroll; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; background: #000; scrollbar-width: none; outline: none; } .sm-reels::-webkit-scrollbar { display: none; } .sm-reel { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; background: #000; } /* The 9:16 stage. Full-bleed on phones; a centred portrait frame on desktop, the way TikTok's web player behaves. */ .sm-reel__stage { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #050505; overflow: hidden; cursor: pointer; user-select: none; } .sm-reel__video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; } /* --- Progress ----------------------------------------------------------- */ /* --- Seek bar ------------------------------------------------------------ */ /* The bar itself is 3px, but the touch target has to be ~24px or nobody can grab it on a phone. */ .sm-reel__scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; display: flex; align-items: flex-end; padding: 0 12px 8px; cursor: pointer; touch-action: none; pointer-events: auto; z-index: 5; } .sm-reel__progress { position: relative; flex: 1; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); transition: height 0.15s ease; } .sm-reel__progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: #fff; } .sm-reel__knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); transform: translateY(-50%) scale(0); transition: transform 0.15s ease; pointer-events: none; } .sm-reel__scrub:hover .sm-reel__progress, .sm-reel.is-scrubbing .sm-reel__progress { height: 6px; } .sm-reel__scrub:hover .sm-reel__knob, .sm-reel__scrub:focus-visible .sm-reel__knob, .sm-reel.is-scrubbing .sm-reel__knob { transform: translateY(-50%) scale(1); } .sm-reel__time { position: absolute; right: 20px; bottom: 28px; color: rgba(255, 255, 255, 0.85); font-size: 11px; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; z-index: 5; } .sm-reel__scrub:hover ~ .sm-reel__time, .sm-reel.is-scrubbing .sm-reel__time { opacity: 1; } /* --- Pause indicator ----------------------------------------------------- */ .sm-reel__tapicon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); color: rgba(255, 255, 255, 0.9); filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 4; } .sm-reel.is-paused .sm-reel__tapicon { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* --- Buffering ----------------------------------------------------------- */ .sm-reel__spinner { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 4; } .sm-reel.is-buffering .sm-reel__spinner { opacity: 1; animation: sm-spin 0.8s linear infinite; } @keyframes sm-spin { to { transform: rotate(360deg); } } /* --- Unplayable clip ----------------------------------------------------- */ /* The UA's [hidden] rule loses to this block's display, so the panel would otherwise sit over every clip whether or not it failed. */ .sm-reel__error[hidden] { display: none; } .sm-reel__error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; background: #0a0a0a; color: #ddd; font-size: 14px; z-index: 5; } .sm-reel__error p { margin: 0; } .sm-reel__error-hint { color: #777; font-size: 12px; } /* --- Overlay UI ---------------------------------------------------------- */ .sm-reel__ui { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.25) 45%, transparent); pointer-events: none; z-index: 3; } .sm-reel__meta { min-width: 0; } .sm-reel__title { color: #fff; font-size: 15px; line-height: 1.35; margin: 0 0 4px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .sm-reel__handle { color: rgba(255, 255, 255, 0.72); font-size: 12px; letter-spacing: 0.06em; margin: 0; } /* Sizing and colour for both pills live with .sm-reel__btn in section 7; only the speaker glyph swap belongs to the sound button itself. */ .sm-reel__sound .sm-reel__ico { display: none; } .sm-reels.is-muted .sm-reel__ico--off, .sm-reels:not(.is-muted) .sm-reel__ico--on { display: block; } /* --- Scroll hint --------------------------------------------------------- */ .sm-reels__hint { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); color: rgba(255, 255, 255, 0.75); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; z-index: 6; animation: sm-bob 1.8s ease-in-out infinite; } .sm-reels__hint.is-gone { opacity: 0; transition: opacity 0.4s ease; } @keyframes sm-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } } .sm-reels__empty { text-align: center; padding: 60px 20px; color: #999; } /* Phones: edge to edge, no letterboxing. */ @media (max-width: 767px) { .sm-reel__stage { width: 100%; aspect-ratio: auto; } } @media (prefers-reduced-motion: reduce) { .sm-reels__hint, .sm-reel.is-buffering .sm-reel__spinner { animation: none; } } /* -------------------------------------------------------------------------- 4. Members-only password gate -------------------------------------------------------------------------- */ .sm-gate { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 20px; } .sm-gate__box { max-width: 440px; width: 100%; text-align: center; background: #0b0b0b; border: 1px solid #262626; border-radius: 10px; padding: 36px 28px; color: #fff; } .sm-gate__box h2 { color: #fff; margin: 0 0 14px; font-size: 22px; } .sm-gate__box p { color: #b9b9b9; font-size: 14px; line-height: 1.6; } .sm-gate__hint { margin-top: 22px; font-size: 13px; } .sm-gate__form { display: flex; gap: 8px; margin: 12px 0 0; } .sm-gate__form input { flex: 1; background: #1b1b1b; border: 1px solid #333; color: #fff; padding: 12px 14px; border-radius: 4px; } .sm-gate__form button { background: #fff; color: #000; border: 0; padding: 12px 22px; border-radius: 4px; font-weight: 700; cursor: pointer; } .sm-gate__apply { margin: 20px 0 0; font-size: 13px; } .sm-gate__apply a { color: #fff; text-decoration: underline; } .sm-gate__error { color: #ff8080; font-size: 13px; margin: 0 0 14px; } /* "Get the password" button and its e-Transfer popup. */ .sm-gate__buy { display: block; width: 100%; height: auto; /* the parent theme pins every button to ~40px */ margin: 22px 0 0; padding: 13px 18px; background: #ff2d78; color: #fff; border: 0; border-radius: 4px; font-weight: 700; font-size: 14px; cursor: pointer; } .sm-gate__modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.82); } .sm-gate__modal[hidden] { display: none; } .sm-gate__modal-box { position: relative; max-width: 420px; width: 100%; background: #0b0b0b; border: 1px solid #262626; border-radius: 10px; padding: 32px 28px; text-align: center; color: #fff; } .sm-gate__modal-box h3 { color: #fff; margin: 0 0 12px; font-size: 20px; } .sm-gate__modal-box p { color: #b9b9b9; font-size: 14px; line-height: 1.6; } .sm-gate__modal-close { position: absolute; top: 6px; right: 10px; width: auto; height: auto; padding: 4px 8px; background: none; border: 0; color: #b9b9b9; font-size: 24px; line-height: 1; cursor: pointer; } .sm-gate__email { margin: 16px 0 0; padding: 12px 10px; background: #1b1b1b; border: 1px solid #333; border-radius: 4px; color: #fff !important; font-size: 15px; font-weight: 700; word-break: break-all; } .sm-gate__note { margin: 14px 0 0; font-size: 12px; } /* -------------------------------------------------------------------------- 5. Age-restricted exit page -------------------------------------------------------------------------- */ /* No menu here: a visitor who answered "No" gets no links back into the site. !important because the parent theme's menu script sets display inline. */ body.page-id-779 .main-nav.header_menu, body.page-id-779 .header_footer .social { display: none !important; } body.page-id-779 .sm-restricted h3 { margin-top: 34px; } body.page-id-779 .sm-restricted .btn { border-radius: 999px; margin-top: 6px; } /* -------------------------------------------------------------------------- 6. About Us page -------------------------------------------------------------------------- */ /* Entrance: sections rise in rather than snapping into place. */ @keyframes sm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } body.page-id-121 .elementor-widget-toggle, body.page-id-121 .elementor-image-gallery { animation: sm-rise 0.55s ease-out both; } body.page-id-121 .elementor-image-gallery { animation-delay: 0.12s; } /* --- Toggles ------------------------------------------------------------- */ body.page-id-121 .elementor-tab-title { font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; padding: 20px 4px; border-top: 1px solid #262626; border-bottom: none; transition: color 0.25s ease, padding-left 0.25s ease; } body.page-id-121 .elementor-toggle-item:last-child .elementor-tab-title { border-bottom: 1px solid #262626; } body.page-id-121 .elementor-tab-title:hover { color: #fff; padding-left: 12px; } body.page-id-121 .elementor-tab-title.elementor-active { color: #fff; } body.page-id-121 .elementor-toggle-icon { opacity: 0.55; } /* --- Toggle body --------------------------------------------------------- */ body.page-id-121 .elementor-tab-content { max-width: 62ch; font-size: 14px; line-height: 1.85; color: #a8a8a8; padding: 4px 4px 26px; border-bottom: none; } /* First line gets a small accent rule, a nod to editorial layout. */ body.page-id-121 .elementor-tab-content::before { content: ""; display: block; width: 36px; height: 2px; background: #fff; opacity: 0.75; margin: 0 0 18px; } /* --- Gallery ------------------------------------------------------------- */ /* The gallery shortcode prints an inline #gallery-N block with floats and a grey border. Its float layout is left alone; only the styling is replaced. !important is the only way past the inline block's ID specificity. */ body.page-id-121 .gallery { margin-top: 46px !important; } body.page-id-121 .gallery .gallery-item { margin-top: 0 !important; padding: 3px; overflow: hidden; } body.page-id-121 .gallery img { border: none !important; width: 100%; height: auto; display: block; filter: brightness(0.82); transition: transform 0.6s ease, filter 0.4s ease; } body.page-id-121 .gallery .gallery-item:hover img { transform: scale(1.06); filter: brightness(1); } @media (max-width: 767px) { body.page-id-121 .gallery { margin-top: 32px !important; } body.page-id-121 .elementor-tab-title { font-size: 13px; padding: 16px 4px; } } /* -------------------------------------------------------------------------- 7. Feels page: chrome, controls and the browse grid The parent header is position:fixed, 80px tall, z-index 1000, and its logo image is 150x85 — taller than the bar it sits in — so on the full-bleed feed it landed straight on top of the video. On this page only it becomes a slim transparent strip with a scrim behind it. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.sm-feels-page .header { height: 56px; background: transparent; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)); pointer-events: none; } body.sm-feels-page .header a, body.sm-feels-page .header .header_trigger, body.sm-feels-page .header .mobile_nav { pointer-events: auto; } body.sm-feels-page .header .header_logo { height: auto; } body.sm-feels-page .header .custom-logo { width: auto; max-height: 30px; } } /* --- Browse button ------------------------------------------------------- */ .sm-feels__bar { position: fixed; top: 12px; right: 58px; z-index: 1001; } @media (min-width: 1025px) { .sm-feels__bar { top: 20px; right: 24px; } } .sm-feels__browse { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .sm-feels__browse:hover { background: #e0447c; border-color: #e0447c; } /* --- Control cluster ----------------------------------------------------- */ /* Round icon buttons. The muted state is carried by colour (see below) rather than by a word, so the speaker still reads as a control. */ .sm-reel__controls { pointer-events: auto; flex: none; display: flex; align-items: center; gap: 8px; } .sm-reel__btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; min-width: 42px; height: 42px; padding: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px; font-size: 12px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .sm-reel__btn:hover, .sm-reel__btn:focus-visible { background: rgba(0, 0, 0, 0.85); border-color: rgba(255, 255, 255, 0.6); } /* Muted is the state people need to act on, so it is the one that stands out. */ .sm-reels.is-muted .sm-reel__sound { background: #e0447c; border-color: #e0447c; } .sm-reels.is-muted .sm-reel__sound:hover { background: #c53367; border-color: #c53367; } /* Which glyph shows in each pill. */ .sm-reel__toggle .sm-reel__ico--play, .sm-reel.is-paused .sm-reel__toggle .sm-reel__ico--pause { display: none; } .sm-reel.is-paused .sm-reel__toggle .sm-reel__ico--play { display: block; } /* --- Members-only clip --------------------------------------------------- */ .sm-reel__blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .sm-reel__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.45); } .sm-reel__lock-ico { color: rgba(255, 255, 255, 0.9); } .sm-reel__lock-title { margin: 0; font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase; } .sm-reel__lock-copy { margin: 0; max-width: 22em; color: rgba(255, 255, 255, 0.75); font-size: 13px; } .sm-reel__lock-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; } .sm-reel__lock-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 999px; background: #e0447c; color: #fff; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .sm-reel__lock-btn:hover { background: #c53367; color: #fff; } .sm-reel__lock-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); } .sm-reel__lock-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); } .sm-reel__lock-note { color: rgba(255, 255, 255, 0.7); font-size: 12px; } /* --- Browse grid --------------------------------------------------------- */ .sm-grid { position: fixed; inset: 0; z-index: 1002; background: #000; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sm-grid[hidden] { display: none; } body.sm-grid-open { overflow: hidden; } .sm-grid__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(6px); } .sm-grid__count { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .sm-grid__close { display: inline-flex; align-items: center; justify-content: center; /* The theme pads every button and leaves inline SVGs unsized. */ flex: none; padding: 0; width: 34px; min-width: 34px; height: 34px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; cursor: pointer; } .sm-grid__close:hover { background: rgba(255, 255, 255, 0.2); } .sm-grid svg, .sm-feels svg { flex: none; width: 18px; height: 18px; } .sm-grid__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 3px; padding: 3px; } @media (min-width: 768px) { .sm-grid__items { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; padding: 6px; } } .sm-grid__item { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; /* The theme gives every button a fixed 40px height, which beats aspect-ratio and flattened the tiles. */ height: auto; line-height: 0; padding: 0; border: 0; background: #101010; overflow: hidden; cursor: pointer; } .sm-grid__thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .sm-grid__item:hover .sm-grid__thumb { transform: scale(1.04); } .sm-grid__thumb--none { background: #1a1a1a; } .sm-grid__badge { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(0, 0, 0, 0.65); color: #fff; } .sm-grid__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); color: #fff; font-size: 11px; line-height: 1.3; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Stacking inside a reel ---------------------------------------------- */ .sm-reel__blur { z-index: 0; } .sm-reel__lock { z-index: 2; } .sm-reel__ui { z-index: 3; } /* The lock panel is centred over the whole stage, so keep it clear of the title row at the bottom. */ .sm-reel.is-locked .sm-reel__lock { padding-bottom: 96px; } /* --- View counts --------------------------------------------------------- */ .sm-views { display: inline-flex; align-items: center; gap: 4px; line-height: 1; white-space: nowrap; } .sm-views svg { opacity: 0.85; } .sm-reel__handle { display: flex; align-items: center; gap: 12px; } .sm-reel__views { color: #fff; font-size: 12px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .sm-grid__label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .sm-grid__views { font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); } .sm-grid__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, 0.8); } /* -------------------------------------------------------------------------- 8. Member portal — /join, /login, /portal Same dark card as the password gate in section 4, widened and set left so it can hold forms and a status card rather than one password field. The parent theme's fixed button height (see section 7) applies here too, so every button states its own padding and height. -------------------------------------------------------------------------- */ .sm-portal { display: flex; justify-content: center; padding: 60px 20px 80px; } .sm-portal__box { width: 100%; max-width: 520px; background: #0b0b0b; border: 1px solid #262626; border-radius: 10px; padding: 40px 32px; color: #fff; } .sm-portal__title { color: #fff; margin: 0 0 8px; font-size: 26px; line-height: 1.2; } .sm-portal__lede { color: #b9b9b9; font-size: 14px; line-height: 1.6; margin: 0 0 24px; } .sm-portal__hint { color: #777; font-size: 12px; margin: -8px 0 18px; } /* --- Notices ------------------------------------------------------------- */ .sm-portal__notice { font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 6px; margin: 0 0 20px; border-left: 3px solid; } .sm-portal__notice a { color: #fff; text-decoration: underline; } .sm-portal__notice--error { background: #1b1b1b; border-left-color: #ff8080; color: #ff8080; } .sm-portal__notice--ok { background: #1b1b1b; border-left-color: #e0447c; color: #fff; } .sm-portal__notice--notice { background: #1b1b1b; border-left-color: #6f6f6f; color: #b9b9b9; } /* --- Status card --------------------------------------------------------- */ .sm-portal__status { background: #1b1b1b; border: 1px solid #262626; border-left: 3px solid #6f6f6f; border-radius: 6px; padding: 18px 20px; margin: 0 0 26px; } .sm-portal__status p { color: #b9b9b9; font-size: 14px; line-height: 1.6; margin: 0; } .sm-portal__status strong { color: #fff; } .sm-portal__state { color: #fff !important; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px !important; } .sm-portal__status--active { border-left-color: #e0447c; } .sm-portal__status--claimed { border-left-color: #b9b9b9; } .sm-portal__status--lapsed { border-left-color: #ff8080; } /* --- e-Transfer instructions --------------------------------------------- */ .sm-portal__pay { border-top: 1px solid #262626; padding-top: 26px; margin-bottom: 26px; } .sm-portal__pay h2, .sm-portal__account h2 { color: #fff; font-size: 17px; margin: 0 0 16px; } .sm-portal__paydl { display: grid; grid-template-columns: 124px 1fr; gap: 10px 16px; margin: 0 0 18px; font-size: 14px; } /* width/float: the parent theme pins every dl dt to a fixed narrow width and floats it, which survives into the grid cell and wraps the labels. */ .sm-portal__paydl dt { width: auto; float: none; color: #777; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; } .sm-portal__paydl dd { color: #fff; margin: 0; line-height: 1.5; } .sm-portal__paydl code { background: #1b1b1b; border: 1px solid #333; border-radius: 4px; padding: 3px 8px; color: #e0447c; font-size: 13px; word-break: break-all; } /* --- Forms --------------------------------------------------------------- */ .sm-portal__form label { display: block; color: #b9b9b9; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; } .sm-portal__form input[type="text"], .sm-portal__form input[type="email"], .sm-portal__form input[type="password"] { width: 100%; background: #1b1b1b; border: 1px solid #333; color: #fff; padding: 12px 14px; border-radius: 4px; margin: 0 0 18px; font-size: 15px; } .sm-portal__form input:focus { border-color: #e0447c; outline: none; } .sm-portal__check { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; margin: 0 0 20px !important; } .sm-portal__check input { margin: 0; } /* --- Buttons ------------------------------------------------------------- */ /* height:auto — the parent theme pins every button to ~40px. */ .sm-portal__btn { display: inline-block; height: auto; background: #e0447c; border: 1px solid #e0447c; color: #fff; padding: 13px 26px; border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 1.2; cursor: pointer; text-decoration: none; } .sm-portal__btn:hover, .sm-portal__btn:focus { background: #c53367; border-color: #c53367; color: #fff; } .sm-portal__btn--ghost { background: transparent; border-color: #333; color: #fff; } .sm-portal__btn--ghost:hover, .sm-portal__btn--ghost:focus { background: #1b1b1b; border-color: #6f6f6f; color: #fff; } /* --- Account block ------------------------------------------------------- */ .sm-portal__account { border-top: 1px solid #262626; padding-top: 26px; } .sm-portal__alt { margin: 22px 0 0; font-size: 13px; color: #777; } .sm-portal__alt a { color: #fff; text-decoration: underline; } @media (max-width: 560px) { .sm-portal { padding: 32px 14px 60px; } .sm-portal__box { padding: 30px 20px; } .sm-portal__paydl { grid-template-columns: 1fr; gap: 4px 0; } /* Stacked, the theme's right-aligned dt would sit over a left-aligned dd. */ .sm-portal__paydl dt { text-align: left; } .sm-portal__paydl dd { margin-bottom: 10px; } }