/* Theme Name: Lumanail - 1 Description: Internal theme — Template “v” variant. Not for distribution. Version: 1.0.0 Author: Lumanail Team Update URI: lumanail/private Text Domain: lumanail */ /* style.css */ /*--------------------------------------------------- VARIABLES & RESET ---------------------------------------------------*/ :root { --primary: #ff6600; --dark: #0f0f0f; --light: #f5f5f5; --accent: #1a1a1a; --spacing: 1.5rem; } * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; transition: all 0.3s ease; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Poppins', sans-serif; background: var(--dark); color: var(--light); line-height: 1.6; } /* ————— Sitewide custom cursor ————— */ :root{ /* if you ever move files, change paths here once */ --cursor-cur: url('assets/images/cursor.cur'); --cursor-png: url('assets/images/cursor.png') 32 32; /* hotspot x y */ } /* Base cursor across the whole site */ html, body { cursor: var(--cursor-cur), var(--cursor-png), auto; } /* Interactive elements should still feel clickable */ a, button, [role="button"], .btn, .navbar-toggler, label, summary { cursor: var(--cursor-cur), var(--cursor-png), pointer; } /* Keep I-beam where people type (more usable) */ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="search"], input[type="password"], textarea, [contenteditable="true"] { cursor: text; } /* Drag handles etc. (optional: keep default) */ /* .resizable, [draggable="true"] { cursor: move; } */ /* Focus styles */ a, button, [role="button"], input, textarea, select { outline-color: var(--primary); outline-offset: 2px; } /* Images default responsive */ img, svg, video, canvas, audio, iframe, embed, object { max-width: 100%; height: auto; } /* Utility: visually hidden (and focusable) */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .visually-hidden-focusable:active, .visually-hidden-focusable:focus { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; } /*--------------------------------------------------- NAVBAR – overlay trigger (bars → X) ---------------------------------------------------*/ .overlay-toggle{ position: relative; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; color: var(--primary); /* default (orange) */ } .overlay-toggle .bar{ position: absolute; left: 20%; right: 20%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, color .2s ease, background-color .2s ease; } .overlay-toggle .bar:nth-child(1){ top: 14px; } .overlay-toggle .bar:nth-child(2){ top: 21px; } .overlay-toggle .bar:nth-child(3){ top: 28px; } /* morph to X */ .overlay-toggle.is-active .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); } .overlay-toggle.is-active .bar:nth-child(2){ opacity: 0; } .overlay-toggle.is-active .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* Floating state: when moved to during overlay */ .overlay-toggle--floating{ position: fixed !important; top: 18px; right: 18px; z-index: 10001; /* above overlay */ color: #000; /* black bars on orange side */ display: inline-flex !important; } @media (min-width: 783px){ body.admin-bar .overlay-toggle--floating{ top: 50px; } /* WP admin bar offset */ } @media (max-width: 782.98px){ body.admin-bar .overlay-toggle--floating{ top: 66px; } } /* ========================================= MOBILE NAV: hide text links, keep bars ========================================= */ @media (max-width: 991.98px) { /* Hide regular desktop menu links, but NOT the wrapper */ .navbar .navbar-nav { display: none !important; } /* Keep the overlay toggle (3 bars) visible */ .navbar .overlay-toggle { display: inline-flex !important; position: relative; z-index: 1001; /* stays clickable */ } } /* ========================================= MOBILE NAV LAYOUT: keep logo left, bars right ========================================= */ @media (max-width: 991.98px) { /* Keep everything on one row */ .navbar .container-fluid { display: flex; align-items: center; justify-content: space-between; } /* Stop the collapse area from taking full width / wrapping */ .navbar .navbar-collapse { flex-basis: auto; flex-grow: 0; } /* Make sure the 3 bars hug the right side */ .navbar .overlay-toggle { margin-left: auto; } } /* Ensure navbar logo sizing */ .navbar .custom-logo-link{ display:flex; align-items:center; } .navbar .custom-logo-link img.custom-logo{ display:block; height:48px; width:auto; } /*--------------------------------------------------- OVERLAY NAV – split panels ---------------------------------------------------*/ .overlay-nav{ position: fixed; inset: 0; z-index: 10000; /* below floating toggle */ pointer-events: none; } .overlay-nav.is-open{ pointer-events: auto; } .overlay-panel{ position: absolute; top: 0; height: 100%; width: 50vw; transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; } /* left (black) */ .overlay-left{ left: 0; background: #000; display: grid; place-items: center; transform: translateX(-100%); perspective: 1000px; /* harmless for 2D; useful for rotateY */ } .overlay-nav.is-open .overlay-left{ transform: translateX(0); } /* rocking nail */ .overlay-nail{ width: min(14vw, 520px); height: auto; display: block; transform-origin: 50% 50%; /* <-- center-center pivot */ will-change: transform; animation: nail-rock 5s ease-in-out infinite alternate; } @keyframes nail-rock{ 0% { transform: rotate(-4deg); } 100% { transform: rotate(5deg); } } /* right (orange) */ .overlay-right{ right: 0; background: var(--primary); color: #000; transform: translateX(100%); display: flex; flex-direction: column; justify-content: center; align-items: center; } .overlay-nav.is-open .overlay-right{ transform: translateX(0); } .overlay-right-inner{ width: min(780px, 90%); margin: 0 auto; display: grid; gap: 1.25rem; justify-content: center; align-items: center;} .overlay-logo{ width: 90%; max-width: 360px; height: auto; display: block;margin-left: auto;margin-right: auto; } /* Logo link block so margin auto works consistently */ .overlay-logo-link{ display: inline-block; } /* Menu list centered */ .overlay-nav-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; justify-items: center; /* center each

/ */ } .overlay-nav-list li{ margin: .25rem 0; } .overlay-nav-list a{ display: block; font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 2rem); color: #000; text-decoration: none; letter-spacing: .02em; text-align: center; } .overlay-nav-list a:hover{ color: #111; text-decoration: underline; } .overlay-social{ display: flex; gap: .75rem; margin-top: 1rem; justify-content: center;} .overlay-social a, .overlay-social-list a{ width: 40px; height: 40px; border-radius: 50%; border: 2px solid #000; color: #000; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; } .overlay-social a:hover, .overlay-social-list a:hover{ background: #000; color: var(--primary); } /* extra close btn (mobile) */ .overlay-close{ position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; color: #000; display: none; } .overlay-close span{ position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: currentColor; } .overlay-close span:first-child{ transform: rotate(45deg); } .overlay-close span:last-child{ transform: rotate(-45deg); } /* Lock page scroll while open */ body.overlay-open{ overflow: hidden; } /* Mobile: orange side 100% */ @media (max-width: 991.98px){ .overlay-left{ display: none; } .overlay-right{ width: 100vw; } .overlay-close{ display: inline-block; } } /*--------------------------------------------------- HERO ---------------------------------------------------*/ .hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding-left: var(--spacing); overflow: hidden; } /* Vimeo iframe: true “cover” for 16:9 */ .hero-video { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; /* 100 / (16/9) */ min-width: 177.78vh; /* 100 * (16/9) */ min-height: 100vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; /* don’t block clicks */ z-index: 0; /* Nudge visibility without crushing the image */ filter: brightness(0.8) contrast(1.05) saturate(1.05); } /* Lighter base overlay across the whole frame */ .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1; pointer-events: none; } /* Left→right scrim behind the copy area */ .hero-scrim-left { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.55) 25%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.00) 75% ); z-index: 2; pointer-events: none; } /* Strong bottom fade so UI over rooflines stays readable */ .hero-gradient { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); z-index: 3; pointer-events: none; } .hero-content { position: relative; z-index: 4; /* above overlays */ pointer-events: auto; max-width: 1240px; width: 90%; margin: 0 auto; text-align: left; } .hero-content h1 { font-family: 'Orbitron', sans-serif; font-size: clamp(4rem, 12vw, 8rem); margin-bottom: 1rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.35); } .hero-content p { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-bottom: 2rem; color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.35); } /*--------------------------------------------------- VIDEO WRAPPER ---------------------------------------------------*/ .video-wrapper { position: relative; background-image: url('assets/images/low-nails.jpeg'); background-size: cover; background-position: center; border: 3px solid var(--primary); border-radius: 0.75rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7); overflow: hidden; display: flex; justify-content: center; margin-bottom: var(--spacing); } .video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Vimeo inside .video-wrapper (16:9) */ .video-wrapper .vimeo-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; } .video-wrapper .vimeo-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Fallback for old browsers without aspect-ratio */ @supports not (aspect-ratio: 1) { .video-wrapper .vimeo-embed { height: 0; padding-top: 56.25%; } .video-wrapper .vimeo-embed iframe { position: absolute; top: 0; left: 0; } } /*--------------------------------------------------- BUTTONS ---------------------------------------------------*/ .btn-primary { background: var(--primary); border: none; padding: 0.75rem 2rem; } .btn-primary:hover { background: #e05500; } /* Brand outline button for dark sections */ .btn-brand-outline { display: inline-block; font-weight: 600; padding: 0.75rem 1rem; border-radius: 0.5rem; background-color: transparent; /* fills dark bg behind it */ color: var(--primary); /* orange text */ border: 2px solid var(--primary); /* orange border */ text-align: center; line-height: 1.4; } /* Hover: turn into full orange pill with dark text */ .btn-brand-outline:hover { background-color: var(--primary); /* solid orange */ color: #000; /* high contrast */ border-color: var(--primary); } /*--------------------------------------------------- SECTIONS ---------------------------------------------------*/ .section { padding: 100px 0; } .section-title { font-size: 2.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing); color: var(--primary); } .section-intro { font-size: 1.125rem; color: var(--light); margin-bottom: var(--spacing); } .section-subtitle { font-size: 1rem; margin-bottom: 0.5rem; color: var(--dark); } .bg-light { background: var(--light); color: var(--dark); } .overview-dark { background-color: #050505; color: #eaeaea; } .overview-dark .section-title { color: var(--primary); font-family: 'Orbitron', sans-serif; font-size: clamp(2.75rem, 8vw, 5rem); } .overview-dark .section-lead { color: rgba(234, 234, 234, 0.8); font-size: 1.125rem; max-width: 640px; margin: 0 auto var(--spacing); text-align: center; } /*--------------------------------------------------- PRODUCT CARDS ---------------------------------------------------*/ .product-card { background: var(--accent); border: none; border-radius: 0.75rem; padding: var(--spacing); } .product-card img { width: 80px; margin: 0 auto var(--spacing); } .product-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; } /*--------------------------------------------------- FEATURE CARDS (DARK) ---------------------------------------------------*/ .feature-card { background: #111; color: #eaeaea; border: none; border-radius: 0.75rem; transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; padding: var(--spacing); } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8); } .icon-wrapper { width: 64px; height: 64px; margin: 0 auto 1rem; } .icon-wrapper img { width: 100%; height: 100%; object-fit: cover; } .overview-dark .card-title { margin-bottom: 0.5rem; } .overview-dark .card-text { color: rgba(234, 234, 234, 0.7); font-size: 0.95rem; } /*--------------------------------------------------- MAP PLACEHOLDER ---------------------------------------------------*/ .map-wrapper { max-width: 800px; margin: 0 auto; } .map-placeholder { width: 100%; height: 400px; background: #333; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: #999; font-size: 1.25rem; } /*--------------------------------------------------- FOOTER ---------------------------------------------------*/ /* Subscribe */ .footer-subscribe { padding: 6rem 0; } .subscribe-heading { font-size: 1.5rem; font-weight: 500; text-transform: capitalize; letter-spacing: 0.02em; } .subscribe-input { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; flex: 1; margin-right: 1rem; } .subscribe-input::placeholder { color: rgba(255,255,255,0.6); } .subscribe-btn { padding: 0.75rem 1.5rem; border: 1px solid #fff; text-transform: uppercase; letter-spacing: 0.05em; } /* Divider */ .footer-divider { border: 0; border-top: 1px solid rgba(244,244,244,0.7); margin: 0; } /* Main footer */ .footer-main { padding: 6rem 0; } /* Logo (custom logo or fallback) */ .footer .custom-logo-link, .footer .footer-logo-link { display: inline-flex; align-items: center; text-decoration: none; } .footer .custom-logo, .footer .custom-logo-link img, .footer .footer-logo { display: block; max-width: 200px; width: auto; height: auto !important; vertical-align: middle; } /* Lists / titles / text */ .footer-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; color: #fff; } .footer-list { list-style: none; margin: 0; padding: 0; } .footer-list a { display: block; margin-bottom: 0.75rem; color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.95rem; } .footer-list a:hover { color: #fff; } .footer-contact, .footer-address { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin-bottom: 1rem; } .footer-address { line-height: 1.5; } /* Bottom bar */ .footer-bottom { padding: 3rem 0; } .footer-bottom p { color: rgba(255,255,255,0.6); font-size: 0.875rem; margin: 0; } /* Small-screen tweaks */ @media (max-width: 575.98px) { .footer .custom-logo-link, .footer .footer-logo-link { justify-content: center; } } /* IPISC logo */ .footer-ipisc-logo { max-width: 140px; height: auto; opacity: 0.9; transition: opacity 0.2s ease-in-out; } .footer-ipisc-logo:hover { opacity: 1; } /* ================================ Footer subscribe (WPForms ID 49) Input + Button hard styles ================================ */ /* EMAIL INPUT */ .footer-subscribe #wpforms-49-field_1 { width: 100%; padding: 0.85rem 1.25rem !important; background: rgba(255,255,255,0.06) !important; /* dark input */ border: 1px solid rgba(255,255,255,0.35) !important; color: #fff !important; border-radius: .5rem !important; box-shadow: none !important; outline: none !important; } .footer-subscribe #wpforms-49-field_1::placeholder { color: rgba(255,255,255,0.6) !important; } /* Focus = brighter border, no blue glow */ .footer-subscribe #wpforms-49-field_1:focus, .footer-subscribe #wpforms-49-field_1:focus-visible { border-color: #ffffff !important; box-shadow: none !important; outline: none !important; } /* Error state (keep dark bg, red border/text) */ .footer-subscribe #wpforms-49-field_1.wpforms-error, .footer-subscribe #wpforms-49-field_1[aria-invalid="true"] { border-color: #e74c3c !important; } .footer-subscribe #wpforms-form-49 .wpforms-error, .footer-subscribe #wpforms-form-49 .wpforms-error:before { color: #e74c3c !important; } /* SUBMIT BUTTON */ .footer-subscribe #wpforms-submit-49 { padding: 0.85rem 1.5rem !important; border: 1px solid #fff !important; background: transparent !important; color: #fff !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-radius: .5rem !important; line-height: 1 !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; } /* Hover/active states */ .footer-subscribe #wpforms-submit-49:hover, .footer-subscribe #wpforms-submit-49:focus { background: #ffffff !important; color: #000 !important; border-color: #ffffff !important; } .footer-subscribe #wpforms-submit-49:active { transform: translateY(1px); } /* Keep them on one line with a tight gap */ .footer-subscribe #wpforms-form-49 { display: flex; align-items: center; gap: 1rem; margin: 0; } .footer-subscribe #wpforms-form-49 .wpforms-field-container { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; margin: 0; } .footer-subscribe #wpforms-49-field_1-container { flex: 1 1 420px; margin: 0; } .footer-subscribe #wpforms-form-49 .wpforms-submit-container { flex: 0 0 auto; margin: 0; } /* Hide the extra text field + honeypot that were showing */ .footer-subscribe #wpforms-49-field_2-container, .footer-subscribe #wpforms-49-field_3-container { display: none !important; } /* Mobile: stack full width */ @media (max-width: 767.98px) { .footer-subscribe #wpforms-form-49 { flex-direction: column; align-items: stretch; } .footer-subscribe #wpforms-submit-49 { width: 100%; text-align: center; } } /* square div with full-cover bg image */ .feature-image { width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; border-radius: 0.5rem; } /* preserve the dark overlay and hover lift */ .feature-card { position: relative; background: var(--accent); border: none; border-radius: 0.75rem; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.1); z-index: 0; } .feature-card .card-title, .feature-card .card-text { position: relative; z-index: 1; color: #fff; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(0,0,0,0.8); } /*——————————————— About Teaser Section ———————————————*/ .about-teaser { position: relative; overflow: hidden; /* vertical gradient from black → lighter dark */ background: linear-gradient(180deg, #000 0%, #1a1a1a 100%); min-height: 80vh; display: flex; align-items: center; padding: 0; } /* Pattern overlay, masked so only bottom (lighter) half shows */ .about-teaser::before { content: ""; opacity: 25%; position: absolute; inset: 0; background: url('assets/images/pattern-3.svg') center/cover no-repeat; /* mask-image: white = show, transparent = hide */ mask-image: linear-gradient(to top, white 50%, transparent 100%); -webkit-mask-image: linear-gradient(to top, white 50%, transparent 100%); pointer-events: none; } /* Reset container padding */ .about-teaser .container { padding: 0 1rem; width: 100%; } /* Ensure row fills height */ .about-teaser .row { width: 100%; } /* Left Headline */ .about-teaser__title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.5rem, 4.5vw, 3rem); line-height: 1.1; color: #fff; margin-bottom: 0; } /* Right Copy */ .about-teaser__copy { font-size: clamp(1rem, 2.5vw, 1.125rem); color: #fff; margin-bottom: 1rem; } /* Vertically center right column */ .about-teaser .col-md-6:nth-child(2) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } /* CTA styling */ .about-teaser__cta { font-size: 1.125rem; font-weight: 600; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; margin-top: 1rem; position: relative; padding-right: 1.5em; transition: color 0.2s ease; } .about-teaser__cta:hover { color: #e05500; } /* Inject arrow via pseudo */ .about-teaser__cta::after { content: "→"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.25em; line-height: 1; transition: transform 0.2s ease; } .about-teaser__cta:hover::after { transform: translateY(-50%) translateX(4px); } /* ========================================================= SIGNATURE FEATURES / RECENT PROJECTS (Portrait Slider) ========================================================= */ /* Section wrapper with subtle light gradient + patterned overlay */ #recent-projects{ position:relative; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#eaeaea 100%); min-height:80vh; display:flex; align-items:center; } /* Bottom-weighted pattern overlay (darkened, multiplied) */ #recent-projects::before{ content:""; position:absolute; inset:0; background:url('assets/images/pattern-3.svg') center/cover no-repeat; pointer-events:none; z-index:1; filter:invert(1) brightness(.35) contrast(1.1); mix-blend-mode:multiply; opacity:.75; -webkit-mask-image:linear-gradient(to top, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 100%); mask-image:linear-gradient(to top, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 100%); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; } /* keep content above pattern */ #recent-projects > *{ position:relative; z-index:2; } @supports not (mask-image: linear-gradient(white, transparent)){ #recent-projects::before{ -webkit-mask-image:none; mask-image:none; opacity:.75; } } /* ---------- Top-right custom arrows ---------- */ .projects-controls{ display:flex; align-items:center; gap:.5rem; } .projects-arrow{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:#000; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); transition:transform .15s ease, opacity .15s ease; } .projects-arrow:hover{ transform:translateY(-1px); } .projects-arrow:active{ transform:translateY(0); } .projects-arrow:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } /* Hide Slick’s default arrows (we’re using our own) */ .projects-slider .slick-prev, .projects-slider .slick-next{ display:none !important; } /* ---------- Gaps between slides (use margins) ---------- */ .projects-slider { /* no negative margin here; we'll counter on slick-list */ } .projects-slider .slick-slide{ margin:0 8px !important; /* GAP */ outline:none; } .projects-slider .slick-list{ margin:0 -8px !important; /* counter the slide margins so edges align */ } /* ---------- Card styles (portrait video tiles) ---------- */ .projects-slider .project-slide{ background:#fff; border-radius:.5rem; overflow:hidden; padding:0; text-align:left; box-shadow:0 4px 12px rgba(0,0,0,.05); } .projects-slider .project-slide img{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; } /* Vimeo iframe wrapper (portrait) */ .projects-slider .video-embed{ position:relative; width:100%; aspect-ratio:9/16; background:#000; } .projects-slider .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } /* Text under each tile */ .projects-slider .project-title, .projects-slider .project-description{ padding:.75rem 1rem; } .projects-slider .project-title{ margin-top:.5rem; font-size:1rem; font-weight:600; text-transform:uppercase; color:var(--dark); } .projects-slider .project-description{ margin-top:.25rem; color:#555; font-size:.875rem; } /* =================================================== INDEX / ARCHIVE (DARK) — styled like about-teaser ===================================================*/ .index-archive { position: relative; overflow: hidden; background: linear-gradient(180deg, #000 0%, #1a1a1a 100%); padding: 0; /* mirror about-teaser */ } .index-archive::before { content: ""; opacity: 25%; position: absolute; inset: 0; background: url('assets/images/pattern-3.svg') center/cover no-repeat; mask-image: linear-gradient(to top, white 50%, transparent 100%); -webkit-mask-image: linear-gradient(to top, white 50%, transparent 100%); pointer-events: none; } .index-archive .container { padding: 100px 1rem; position: relative; z-index: 1; } /* Archive header (title + description) */ .archive-header { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; } .archive-title { font-family: 'Orbitron', sans-serif; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.1; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; } .archive-description { font-size: clamp(1rem, 2.5vw, 1.125rem); color: rgba(255,255,255,0.85); max-width: 820px; } /* Post grid / cards */ .posts-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; } .post-card { grid-column: span 12; background: #121212; border: 1px solid rgba(255,255,255,0.06); border-radius: 0.75rem; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .post-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.15); box-shadow: 0 16px 32px rgba(0,0,0,.6); } .post-card__thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b0b0b; overflow: hidden; } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .post-card__body { padding: 1.25rem; } .post-card__meta { display: flex; gap: .75rem; align-items: center; font-size: .875rem; color: rgba(255,255,255,.65); margin-bottom: .5rem; } .post-card__meta .cat { padding: .15rem .5rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: .75rem; letter-spacing: .04em; } .post-card__title a { color: #fff; text-decoration: none; } .post-card__title a:hover { color: var(--primary); } .post-card__title { font-size: 1.375rem; line-height: 1.25; margin: .25rem 0 .5rem; } .post-card__excerpt { color: rgba(255,255,255,.8); margin-bottom: 1rem; } .post-card__more .btn { border-color: rgba(255,255,255,.4); color: #fff; } .post-card__more .btn:hover { background: var(--primary); border-color: var(--primary); color: #000; } /* Responsive columns */ @media (min-width: 576px) { .post-card { grid-column: span 6; } } @media (min-width: 992px) { .post-card { grid-column: span 4; } } /* Archive pagination (matches your preferred markup) */ .pagination { padding: 2rem 0; display: flex; justify-content: center; gap: .5rem; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .75rem; border: 1px solid rgba(255,255,255,.2); border-radius: .5rem; color: #fff; text-decoration: none; font-weight: 600; background: #151515; } .pagination .page-numbers:hover { border-color: var(--primary); color: #000; background: var(--primary); } .pagination .page-numbers.current { background: var(--primary); color: #000; border-color: var(--primary); } .pagination .prev, .pagination .next { letter-spacing: .02em; } /* =================================================== WORDPRESS CORE / BLOCKS – Recommended Base Styles ===================================================*/ /* Alignments */ .alignnone { margin: .5rem 0 1rem 0; } .alignleft { float: left; margin: .25rem 1rem .5rem 0; } .alignright { float: right; margin: .25rem 0 .5rem 1rem; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; } .alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* Clearfix for floats */ .clearfix::after { content: ""; display: table; clear: both; } /* Captions */ .wp-caption { max-width: 100%; } .wp-caption img { display: block; } .wp-caption-text { font-size: .875rem; color: rgba(255,255,255,.75); padding: .5rem 0 0; text-align: center; } /* Galleries */ .gallery { margin-bottom: 1.5rem; display: grid; gap: .75rem; } .gallery-item { text-align: center; } .gallery-columns-2 { grid-template-columns: repeat(2,1fr); } .gallery-columns-3 { grid-template-columns: repeat(3,1fr); } .gallery-columns-4 { grid-template-columns: repeat(4,1fr); } .gallery img { border-radius: .5rem; } /* Block images */ .wp-block-image img { height: auto; } /* Blockquote */ blockquote, .wp-block-quote { border-left: 4px solid var(--primary); padding-left: 1rem; margin: 1.5rem 0; color: rgba(255,255,255,.9); font-style: italic; } .wp-block-pullquote { border-top: 3px solid var(--primary); border-bottom: 3px solid var(--primary); padding: 1rem 0; margin: 2rem 0; text-align: center; } /* Tables */ table, .wp-block-table table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; } th, td { border: 1px solid rgba(255,255,255,.15); padding: .75rem; } th { background: #151515; } /* Code / Pre */ pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } pre, .wp-block-code { background: #0b0b0b; color: #eaeaea; border: 1px solid rgba(255,255,255,.15); border-radius: .5rem; padding: 1rem; overflow: auto; } /* Buttons block */ .wp-block-button .wp-block-button__link { background: var(--primary); color: #000; border-radius: .5rem; padding: .75rem 1.25rem; } .wp-block-button .wp-block-button__link:hover { background: #e05500; color: #000; } /* Embeds */ .wp-block-embed, .wp-block-video, .wp-block-audio, .wp-block-image, .wp-block-gallery { margin: 1.25rem 0; } .wp-block-embed.is-type-video .wp-block-embed__wrapper, .wp-has-aspect-ratio { position: relative; } .wp-has-aspect-ratio iframe, .wp-block-embed__wrapper iframe { width: 100%; height: 100%; position: absolute; inset: 0; } /* Lists & headings in content */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin-top: 1.5rem; margin-bottom: .75rem; line-height: 1.25; } .entry-content p, .entry-content ul, .entry-content ol { margin-bottom: 1rem; } .entry-content ul, .entry-content ol { padding-left: 1.25rem; } /* Sticky & bypostauthor */ .sticky { border-left: 4px solid var(--primary); padding-left: 1rem; } .bypostauthor { outline: 2px dotted rgba(255,255,255,.2); outline-offset: 2px; } /* Forms */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select { background: #111; border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: .5rem; padding: .65rem .9rem; } input::placeholder, textarea::placeholder { color: rgba(255,255,255,.55); } /* Links */ a { color: var(--primary); text-decoration: none; } a:hover { color: #e05500; text-decoration: none; } /* Skip link (if used) */ .skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: static; width: auto; height: auto; padding: .5rem .75rem; background: #000; color: #fff; z-index: 100000; } /* ================================ Right-side DOT NAV (scroll spy) ================================ */ .dotnav{ position: fixed; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 2600; /* above content, below your overlay (3000) */ padding: 8px 6px; border-radius: 999px; background: rgba(0,0,0,.18); /* subtle legibility on bright sections */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .dotnav__dot{ width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary); background: transparent; display: inline-block; opacity: .75; transition: transform .18s ease, background-color .18s ease, opacity .18s ease, border-color .18s ease; outline: none; } .dotnav__dot:hover{ opacity: 1; transform: scale(1.1); } .dotnav__dot:focus-visible{ box-shadow: 0 0 0 3px rgba(255,102,0,.35); } .dotnav__dot.is-active{ background: var(--primary); opacity: 1; transform: scale(1.15); } /* Hide on smaller screens (overlay menu is the pattern there) */ @media (max-width: 991.98px){ .dotnav{ display: none; } } /* When your split overlay opens, keep dots clickable state off */ body.overlay-open .dotnav{ pointer-events: none; opacity: .15; } /* Dotnav labels (hover/focus “tags”) */ .dotnav__dot{ position: relative; } .dotnav__dot::before{ content: attr(data-label); position: absolute; right: 24px; /* show to the left of the dot */ top: 50%; transform: translateY(-50%) scale(.95); transform-origin: right center; opacity: 0; pointer-events: none; white-space: nowrap; background: #000; color: #fff; font-weight: 700; letter-spacing: .02em; font-size: 14px; line-height: 1; padding: 10px 14px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: opacity .18s ease, transform .18s ease; } .dotnav__dot::after{ content: ""; position: absolute; right: 10px; /* little “pointer” triangle */ top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left-color: #000; opacity: 0; transition: opacity .18s ease; } /* show on hover/focus */ .dotnav__dot:hover::before, .dotnav__dot:focus-visible::before, .dotnav__dot:hover::after, .dotnav__dot:focus-visible::after{ opacity: 1; transform: translateY(-50%) scale(1); } /* optional: make the top dot filled when active (JS will handle state) */ .dotnav__dot--top.is-active{ background: var(--primary); } /* Square video card */ .video-square{ border-radius: .75rem; overflow: hidden; /* clip the iframe */ } /* 1×1 box that holds the video */ .vimeo-cover{ position: relative; width: 100%; aspect-ratio: 1 / 1; /* perfect square */ background: #000 center/cover no-repeat; /* FPO shows until video paints */ } /* Force a 16:9 Vimeo to COVER the square: - width = 177.78% (16/9) - height = 100% of square - centered with translate */ .vimeo-cover .vimeo-iframe--cover-16x9{ position: absolute; top: 50%; left: 50%; width: 177.78%; height: 100%; transform: translate(-50%, -50%); border: 0; display: block; pointer-events: none; /* decorative background */ } /* (Optional) If you ever drop a portrait 9:16 video in the square */ .vimeo-cover .vimeo-iframe--cover-9x16{ position: absolute; top: 50%; left: 50%; width: 100%; height: 177.78%; transform: translate(-50%, -50%); border: 0; display: block; pointer-events: none; } /* Fallback: older browsers without aspect-ratio */ @supports not (aspect-ratio: 1 / 1){ .vimeo-cover{ height: 0; padding-top: 100%; } .vimeo-cover .vimeo-iframe--cover-16x9, .vimeo-cover .vimeo-iframe--cover-9x16{ top:0; left:0; transform:none; } } /* Small page tweaks you had */ #intro-hero .card img { aspect-ratio: 16/9; } #features h2 { font-family: 'Orbitron', sans-serif; color: var(--primary); text-transform: uppercase; } #features ul li::marker { content: none; } /* ================================ Reusable background layer utils ================================ */ /* 1) Base layer: gives positioned context & holds ::before pattern */ .bg-layer { position: relative; overflow: hidden; } /* Keep your real content above the ::before pattern */ .bg-layer > * { position: relative; z-index: 1; } /* 2) Background gradients */ .bg-gradient-dark { background: linear-gradient(180deg, #000 0%, #1a1a1a 100%); color: #eaeaea; } .bg-gradient-light { background: linear-gradient(180deg, #fff 0%, #eaeaea 100%); color: var(--dark, #0f0f0f); } /* 3) Pattern overlay via ::before + CSS vars - Override per section with: --pattern-url: url('...svg') --pattern-opacity: 0..1 --mask-stop: 55% (where the fade happens) */ .bg-layer.pattern-overlay::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* defaults (override inline or in a class) */ --pattern-url: url('assets/images/pattern-3.svg'); --pattern-opacity: 0.25; --mask-stop: 50%; background: var(--pattern-url) center/cover no-repeat; opacity: var(--pattern-opacity); } /* 4) Pattern tone for DARK backgrounds (what you used on .index-archive) This is a subtle, light-ish pattern over dark bg. */ .pattern-on-dark::before { /* no filter needed; just let it be light with lower opacity */ } /* 5) Pattern tone for LIGHT backgrounds (what you used on “white” section) Make the pattern darker and multiply it into the light gradient. */ .pattern-on-light::before { filter: invert(1) brightness(0.35) contrast(1.1); mix-blend-mode: multiply; opacity: 0.75; /* stronger for light bg */ } /* 6) Mask helpers (bottom-weighted or top-weighted reveal) */ .pattern-mask-bottom::before { -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,1) var(--mask-stop, 55%), rgba(255,255,255,0) 100%); mask-image: linear-gradient(to top, rgba(255,255,255,1) var(--mask-stop, 55%), rgba(255,255,255,0) 100%); } .pattern-mask-top::before { -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,1) var(--mask-stop, 55%), rgba(255,255,255,0) 100%); mask-image: linear-gradient(to bottom, rgba(255,255,255,1) var(--mask-stop, 55%), rgba(255,255,255,0) 100%); } /* 7) Fallback if mask-image isn’t supported */ @supports not (mask-image: linear-gradient(white, transparent)) { .pattern-mask-bottom::before, .pattern-mask-top::before { -webkit-mask-image: none; mask-image: none; } } /*——————————————— About Teaser Section ———————————————*/ .specs-ribbon { position: relative; overflow: hidden; /* vertical gradient from black → lighter dark */ background: linear-gradient(180deg, #000 0%, #1a1a1a 100%); min-height: 80vh; display: flex; align-items: center; padding: 0; } /* Pattern overlay, masked so only bottom (lighter) half shows */ .specs-ribbon::before { content: ""; opacity: 25%; position: absolute; inset: 0; background: url('assets/images/pattern-5.svg') center/cover no-repeat; /* mask-image: white = show, transparent = hide */ mask-image: linear-gradient(to top, white 50%, transparent 100%); -webkit-mask-image: linear-gradient(to top, white 50%, transparent 100%); pointer-events: none; } /* Ensure real content stays above */ .specs-ribbon > * { position: relative; z-index: 1; } .specs-inner{ max-width: 1100px; margin: 0 auto; } .specs-ribbon p{ margin: 0; line-height: 1.25; color: #e0e0e0; } /* Headline line */ .specs-line-1{ font-weight: 700; letter-spacing: .02em; font-size: clamp(1.6rem, 3.2vw, 2.4rem); } /* Subhead line */ .specs-line-2{ margin-top: .5rem; color: #cfcfcf; font-size: clamp(1.125rem, 2.2vw, 1.5rem); } /* ——— Vimeo square: force real cover no matter what ——— */ .video-square { border-radius: .75rem; overflow: hidden; } .vimeo-cover.vimeo-cover--square{ position: relative; width: 100%; aspect-ratio: 1 / 1; /* true square */ background: #000 center/cover no-repeat; } /* Base iframe */ .vimeo-cover iframe{ position: absolute !important; inset: 0; border: 0; display: block; pointer-events: none; } /* Cover a 1:1 square with a 16:9 Vimeo (generic catch-all) */ .vimeo-cover iframe, .vimeo-cover .vimeo-iframe, .vimeo-cover .vimeo-iframe--cover-16x9{ top: 50% !important; left: 50% !important; height: 100% !important; width: 177.78% !important; /* 16/9 */ transform: translate(-50%, -50%) !important; } /* If you ever drop a portrait 9:16, swap class OR uncomment this: .vimeo-cover .vimeo-iframe--cover-9x16{ width: 100% !important; height: 177.78% !important; } */ /* Fallback for ancient browsers */ @supports not (aspect-ratio: 1 / 1){ .vimeo-cover.vimeo-cover--square{ height: 0; padding-top: 100%; } .vimeo-cover iframe{ top: 0 !important; left: 0 !important; transform: none !important; } } /* Square Vimeo cover — override global resets that cap width */ .vimeo-cover { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #000 center/cover no-repeat; } .vimeo-cover iframe{ position: absolute !important; top: 50% !important; left: 50% !important; height: 100% !important; width: 177.78% !important; /* 16 / 9 */ transform: translate(-50%, -50%) !important; border: 0; display: block; pointer-events: none; max-width: none !important; /* <-- critical: defeat global max-width:100% */ } /* ======================================================= LumaNail — WPForms Dark Mode (Unified + Final Radius Fix) ======================================================= */ /* --- FORM WRAPPER CARD -------------------------------- */ /* Outer wrapper around the form (wpforms-outer in template) */ .bg-gradient-dark .wpforms-outer { background: rgba(255,255,255,0.04); /* subtle smoky gray overlay */ border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; padding: 2.25rem 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.35); backdrop-filter: blur(4px); text-align: left; /* make sure WPForms starts left-aligned */ max-width: 860px; } /* Keep heading/subhead in the card centered visually */ .bg-gradient-dark .wpforms-outer h2, .bg-gradient-dark .wpforms-outer p.lead { text-align: center; margin-left: auto; margin-right: auto; } /* Make sure form inside respects border radius */ .bg-gradient-dark .wpforms-outer .wpforms-container { border-radius: inherit; overflow: hidden; } /* --- ALIGNMENT FIXES ---------------------------------- */ /* Force actual form guts to align left even if parent column is text-center */ .bg-gradient-dark .wpforms-container, .bg-gradient-dark .wpforms-container .wpforms-form, .bg-gradient-dark .wpforms-container .wpforms-field, .bg-gradient-dark .wpforms-container .wpforms-field-row, .bg-gradient-dark .wpforms-container .wpforms-field-row-block { text-align: left !important; } /* Make sure individual labels aren't inheriting center */ .bg-gradient-dark .wpforms-container .wpforms-field-label, .bg-gradient-dark .wpforms-container .wpforms-field-sublabel, .bg-gradient-dark .wpforms-container .wpforms-field-description { text-align: left !important; display: block; width: 100%; } /* Checkbox / radio lists: align left, not centered */ .bg-gradient-dark .wpforms-container .wpforms-field-checkbox ul, .bg-gradient-dark .wpforms-container .wpforms-field-radio ul, .bg-gradient-dark .wpforms-container .wpforms-field-checkbox li, .bg-gradient-dark .wpforms-container .wpforms-field-radio li { text-align: left !important; justify-content: flex-start; } /* Just to be safe: the text inside inputs shouldn't be centered */ .bg-gradient-dark .wpforms-container .wpforms-field input, .bg-gradient-dark .wpforms-container .wpforms-field select, .bg-gradient-dark .wpforms-container .wpforms-field textarea { text-align: left; } /* --- TYPE / COLORS / LABELS --------------------------- */ /* Main labels, sublabels, descriptions all white in dark section */ .bg-gradient-dark .wpforms-container .wpforms-field-label, .bg-gradient-dark .wpforms-container .wpforms-field-sublabel, .bg-gradient-dark .wpforms-container .wpforms-field-description { color: #fff !important; } /* Make checkbox & radio option labels white too */ .bg-gradient-dark .wpforms-container .wpforms-field-checkbox label, .bg-gradient-dark .wpforms-container .wpforms-field-radio label { color: #fff !important; line-height: 1.4; vertical-align: middle; } /* Slightly dim, but readable, style for sublabels like "First" / "Last" */ .bg-gradient-dark .wpforms-container .wpforms-field-sublabel { font-size: 0.85rem; opacity: 0.9; } /* Placeholder color inside inputs/textareas */ .bg-gradient-dark .wpforms-container ::placeholder { color: rgba(255,255,255,0.6); } /* --- FIELD BLOCK SPACING ------------------------------ */ .bg-gradient-dark .wpforms-container .wpforms-field { margin-bottom: 1.2rem; } /* --- TEXT INPUTS / TEXTAREAS / PHONE / EMAIL ---------- */ .bg-gradient-dark .wpforms-container input[type="text"], .bg-gradient-dark .wpforms-container input[type="email"], .bg-gradient-dark .wpforms-container input[type="url"], .bg-gradient-dark .wpforms-container input[type="tel"], .bg-gradient-dark .wpforms-container input[type="number"], .bg-gradient-dark .wpforms-container input[type="password"], .bg-gradient-dark .wpforms-container input[type="search"], .bg-gradient-dark .wpforms-container input[type="date"], .bg-gradient-dark .wpforms-container input[type="time"], .bg-gradient-dark .wpforms-container textarea { background-color: #111; color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 0.6rem !important; padding: 0.8rem 1rem !important; line-height: 1.4 !important; min-height: 48px; transition: border-color .15s ease, box-shadow .15s ease; box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), 0 1px 6px rgba(0,0,0,0.4); } /* --- SELECT (DROPDOWN) ------------------------------- */ .bg-gradient-dark .wpforms-container select { background-color: #111 !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 0.6rem !important; /* padding and height so text doesn't get clipped */ padding: 0.75rem 2.5rem 0.75rem 1rem !important; line-height: 1.4 !important; min-height: 48px; height: 48px; /* caret arrow */ appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-repeat: no-repeat; /* re-center the caret vertically */ background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; padding-right: 2.5rem !important; /* leave room for caret */ text-align: left; box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), 0 1px 6px rgba(0,0,0,0.4); } /* Options inside dropdown list (browser renders native menu bg) Make sure text won't show up white-on-white in native menus */ .bg-gradient-dark .wpforms-container select option { color: #000; line-height: 1.4; } /* --- FOCUS STATE ------------------------------------- */ .bg-gradient-dark .wpforms-container input:focus, .bg-gradient-dark .wpforms-container select:focus, .bg-gradient-dark .wpforms-container textarea:focus { outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(255,102,0,0.3) !important; } /* --- CHECKBOX / RADIO -------------------------------- */ .bg-gradient-dark .wpforms-container input[type="checkbox"], .bg-gradient-dark .wpforms-container input[type="radio"] { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; margin-top: 1px; } .bg-gradient-dark .wpforms-container .wpforms-field-checkbox li, .bg-gradient-dark .wpforms-container .wpforms-field-radio li { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.4rem; line-height: 1.5; border-radius: 0.35rem; padding: 0.15rem 0.25rem; transition: background-color 0.15s ease; } /* Subtle hover highlight for interactive rows */ .bg-gradient-dark .wpforms-container .wpforms-field-checkbox li:hover, .bg-gradient-dark .wpforms-container .wpforms-field-radio li:hover { background-color: rgba(255,255,255,0.05); } /* --- SUBMIT BUTTON (BRAND ORANGE, MATCH .btn-primary) -- */ /* Add breathing room so the button isn't hugging the card's rounded corner */ .bg-gradient-dark .wpforms-container .wpforms-submit-container { padding-left: 1rem; padding-bottom: 1rem; } /* Button itself */ .bg-gradient-dark .wpforms-container .wpforms-submit { background: var(--primary) !important; color: #fff !important; border: 0 !important; /* single, explicit radius on all 4 corners */ border-radius: 10px !important; -webkit-border-radius: 10px !important; padding: 0rem 1.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; line-height: 1.4 !important; box-shadow: 0 8px 22px rgba(0,0,0,0.35) !important; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .bg-gradient-dark .wpforms-container .wpforms-submit:hover { background: #e05500 !important; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,0.45) !important; } /* focus/active state for accessibility */ .bg-gradient-dark .wpforms-container .wpforms-submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* --- ERRORS / CONFIRMATION --------------------------- */ .bg-gradient-dark .wpforms-container .wpforms-error { color: #ff6a6a !important; font-weight: 600; } .bg-gradient-dark .wpforms-confirmation-container-full { background: color-mix(in srgb, var(--primary) 15%, transparent); border-left: 4px solid var(--primary); color: #fff; padding: 1rem 1.25rem; border-radius: 0.5rem; } /* Force white typing color in all key fields */ .bg-gradient-dark .wpforms-container input[type="text"], .bg-gradient-dark .wpforms-container input[type="email"], .bg-gradient-dark .wpforms-container input[type="tel"], .bg-gradient-dark .wpforms-container input[type="url"], .bg-gradient-dark .wpforms-container textarea { color: #fff !important; -webkit-text-fill-color: #fff !important; /* Safari */ caret-color: #fff; } /* On focus, keep text white (WPForms sometimes flips it) */ .bg-gradient-dark .wpforms-container input[type="text"]:focus, .bg-gradient-dark .wpforms-container input[type="email"]:focus, .bg-gradient-dark .wpforms-container input[type="tel"]:focus, .bg-gradient-dark .wpforms-container input[type="url"]:focus, .bg-gradient-dark .wpforms-container textarea:focus { color: #fff !important; -webkit-text-fill-color: #fff !important; caret-color: #fff; } /* ===== Executive Summary tiles ===== */ .es-tiles .tile { text-align: center; padding: 1rem 0; } .es-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 9999px; /* circle */ background: rgba(0, 0, 0, 0.04); /* faint halo behind icon */ margin-bottom: 0.75rem; } .es-icon-lg { font-size: 2.5rem; /* larger icon on mobile */ line-height: 1; color: var(--primary); } @media (min-width: 992px) { .es-icon-wrap { width: 88px; height: 88px; margin-bottom: 1rem; } .es-icon-lg { font-size: 3rem; } } /* Unify subheader size across all tiles */ .es-sub { font-size: 1.6rem; line-height: 1.35; letter-spacing: .01em; font-weight: 600; display: block; margin-bottom: .35rem; } /* Tidy body text */ .es-tiles p, .es-tiles span.text-body-secondary { color: var(--bs-secondary-color, #6c757d); } /* Space between tiles */ .es-tiles li { margin-bottom: 1.25rem; } /* Tighter Bootstrap table with rounded corners */ .table.specs-tight { border-collapse: separate; /* enables visible corner radius */ border-spacing: 0; /* keep grid tight */ font-size: 0.95rem; /* slightly smaller type */ line-height: 1.25; } /* Compact cell padding (tighter than .table-sm defaults) */ .table.specs-tight > :not(caption) > * > th, .table.specs-tight > :not(caption) > * > td { padding: .45rem .75rem; } /* Softer row dividers to match Bootstrap palette */ .table.specs-tight > :not(caption) > * > * { border-color: rgba(0,0,0,.08); } /* Keep zebra stripes subtle */ .table.specs-tight.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(0,0,0,.035); } /* Rounded corners (works with overflow-hidden on the table) */ .table.specs-tight.rounded-3 { border-radius: .75rem; /* Bootstrap rounded-3 ≈ .75rem */ overflow: hidden; } /* Dark section support (optional) */ .section.bg-gradient-dark .table.specs-tight, .pattern-on-dark .table.specs-tight { color: #eaeaea; } .section.bg-gradient-dark .table.specs-tight > :not(caption) > * > * , .pattern-on-dark .table.specs-tight > :not(caption) > * > * { border-color: rgba(255,255,255,.12); } .section.bg-gradient-dark .table.specs-tight.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,.05); } /* ========================== WHERE TO BUY — Unified Style ========================== */ #where-to-buy { background-color: #000; color: #fff; padding: 80px 0; } #where-to-buy .section-title { color: #ff6600; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } #where-to-buy .lead { color: rgba(255,255,255,0.85); max-width: 680px; margin: 0 auto 2rem; } #where-to-buy .buy-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; padding: 2.5rem 2rem; transition: all 0.3s ease; } #where-to-buy .buy-card:hover { background: rgba(255,255,255,0.06); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); } #where-to-buy .buy-logo { display: block; margin: 0 auto; max-height: 140px !important; width: auto; filter: brightness(1.1); } #where-to-buy h3 { color: #fff; font-weight: 600; } #where-to-buy p { color: rgba(255,255,255,0.85); } #where-to-buy .small { color: #ff6600; font-weight: 600; letter-spacing: 0.25px; } #where-to-buy .btn { font-weight: 600; padding: 0.75rem 1rem; border-radius: 0.5rem; } #where-to-buy .btn-primary { background-color: #ff6600; border: none; color: #fff; } #where-to-buy .btn-primary:hover { background-color: #ff7a1f; } #where-to-buy .btn-outline-primary { color: #007bff; border-color: #007bff; } #where-to-buy .btn-outline-primary:hover { background-color: #007bff; color: #fff; } @media (max-width: 992px) { #where-to-buy .buy-card { margin-bottom: 1.5rem; } } /* ========================== FAQ Section ========================== */ #faq.faq-section { position: relative; color: #fff; /* you already pass bg-gradient-dark + pattern-on-dark + pattern-mask-top */ padding-top: 4rem; padding-bottom: 4rem; } /* Topic group toggle (category row) */ .faq-topic-toggle { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: .75rem; padding: 1rem 1.25rem; color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.4; display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; text-decoration: none; } .faq-topic-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); } .faq-topic-title { display: inline-block; color: #fff; font-weight: 600; letter-spacing: .02em; } .faq-topic-icon { font-size: 1rem; line-height: 1; color: var(--primary); transition: transform .2s ease; } /* rotate chevron when open */ .faq-topic-toggle[aria-expanded="true"] .faq-topic-icon { transform: rotate(180deg); } /* Wrapper below each topic button */ .faq-topic-block .accordion { margin-top: .75rem; border-left: 2px solid rgba(255,255,255,0.08); padding-left: .75rem; } /* Each Q/A item */ .faq-item { background: transparent; border: 0; border-radius: .5rem; margin-bottom: .5rem; } /* Question button inside accordion */ .faq-item .accordion-button { background: #0f0f0f; color: #fff; font-weight: 500; font-size: .95rem; line-height: 1.4; border: 1px solid rgba(255,255,255,0.12); border-radius: .5rem; box-shadow: none; padding: .75rem 1rem; } /* Remove Bootstrap blue focus ring */ .faq-item .accordion-button:focus { box-shadow: 0 0 0 3px rgba(255,102,0,.3); border-color: var(--primary); outline: none; } /* When open, Bootstrap normally changes bg. We keep control. */ .faq-item .accordion-button:not(.collapsed) { background: #1a1a1a; color: var(--primary); border-color: var(--primary); } /* Answer body */ .faq-item .accordion-body { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12); border-top: 0; border-radius: 0 0 .5rem .5rem; color: rgba(255,255,255,0.85); font-size: .9rem; line-height: 1.5; padding: 1rem; } .faq-item .accordion-body p:last-child { margin-bottom: 0; } /* LuManiacs hashtag link styling */ .hashtag-link .hashtag-text { color: var(--primary); transition: all 0.25s ease; letter-spacing: 1px; } .hashtag-link:hover .hashtag-text { color: #000; text-shadow: 0 0 10px rgba(255, 102, 0, 0.4); transform: scale(1.05); }