/* Notomantra — UI refresh 2025-08-26
   Scope: Home dashboard, Product page, Admin polish, Laptop frame overhaul.
   Non-breaking: class names preserved. Only styles added/updated.
*/

/* ---------- Theme ---------- */
:root{
  /*
    Light‑mode theme variables.

    Re‑colour the entire site to adopt a clean, minimalist look inspired by
    Notion. Blues and purples have been removed in favour of classic black
    and neutral greys. Backgrounds are white or very light grey to maximise
    contrast with the dark text. Primary accents (used for buttons, pills and
    badges) are now black, with a subtle gradient to a dark grey for depth.
    Borders are softened using low‑contrast greys rather than coloured
    shadows.
  */
  /* Page backgrounds */
  --bg: #ffffff;
  --bg-elev: #ffffff;
  /* Panels and cards */
  --panel: #ffffff;
  --panel-2: #f5f5f5;
  /* Primary accent colours (for buttons, brand pill and badges) */
  --primary: #000000;
  --primary-2: #333333;
  /* Typography colours */
  --text: #111111;
  --text-dim: #555555;
  --muted: #777777;
  /* Borders and shadows */
  --card-border: rgba(0,0,0,.06);
  --ring: rgba(0,0,0,.2);
  --radius: 16px;
  --shadow-1: 0 6px 16px rgba(0,0,0,.06);
  --shadow-2: 0 12px 32px rgba(0,0,0,.09);
  /* Transitions */
  --speed-1: 160ms;
  --speed-2: 240ms;
  /*
    Default accent colours used throughout the site. These values are set here
    so that if the admin has not yet customised the colour palette via the
    settings interface the price tags and other accents still inherit a
    sensible hue. They fallback to the primary palette defined above.
  */
  --primary-color: var(--primary);
  --secondary-color: var(--primary-2);
  /*
    Fallback text colour. If a custom text colour is provided via the site
    settings this variable will be overridden programmatically. Defining
    it here avoids undefined CSS variables in the compiled styles.
  */
  --text-color: var(--text);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  /*
    Lighten the backdrop gradients. Use pastel versions of the primary colours
    with lower opacity so they gently tint the page without dominating it.
  */
  /* Simplify the page backdrop for a cleaner hero. Remove busy radial gradients
     that previously bled into the top of the page. A plain background allows
     the header and hero elements to breathe without drawing attention to
     irregular colour bands. */
  background: var(--bg);
}

/* Links */
a{color:var(--primary); text-decoration:none; transition:color var(--speed-1)}
a:hover{color:var(--primary-2)}

/* Containers */
.container{max-width:1160px; margin:0 auto; padding:16px 24px}

/* ---------- Navbar ---------- */
header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(1.2) blur(10px);
  /*
    Soften the navbar background for light mode. A translucent white
    gradient retains the sticky effect without feeling heavy against
    the light page background.
  */
  background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border-bottom:1px solid var(--card-border);
}

/* Reduce header vertical padding to reclaim space at the top of the page. */
header .container{
  padding-top:4px;
  padding-bottom:4px;
}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.navbar .brand{
  /* Hide the legacy brand in the navbar. The brand now lives inside
     the hero on the home page, so this element is no longer
     displayed. */
  display:none;
}

/*
  Style navigation links (e.g. the "Home" button on the product page) so
  they look like polished action buttons. Using the primary colour palette
  ties the nav into the rest of the theme. The hover effect slightly
  lightens the background and raises the button for a tactile feel.
*/
header nav a {
  display:inline-block;
  background: var(--primary);
  color:#fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight:600;
  text-decoration:none;
  transition: background var(--speed-1), transform var(--speed-1);
}

header nav a:hover {
  background: var(--primary-2);
  transform: translateY(-2px);
}

/* ---------- Buttons ---------- */
.btn-primary,.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:600; text-decoration:none;
  transition: transform var(--speed-1), box-shadow var(--speed-1), background var(--speed-1), border-color var(--speed-1);
}
.btn-primary{
  /* Use the primary colours defined in :root for the button gradient. */
  color:#fff;
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  /* Softer shadow for black buttons */
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.2) }
.btn-outline{
  /* Outline buttons use subtle black tint backgrounds instead of white. */
  color:var(--text);
  border:1px solid var(--card-border);
  background:rgba(0,0,0,.02)
}
.btn-outline:hover{
  border-color:rgba(0,0,0,.12);
  background:rgba(0,0,0,.06)
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  /* Remove the gap above the hero and tighten the space below. The hero now
     sits flush against the navbar for a more cohesive header. */
  margin-top:0;
  /* Reduce the bottom margin so the hero section becomes more compact. A
     smaller gutter still separates it from the rest of the page without
     taking up unnecessary vertical space. */
  margin-bottom:24px;
  /* Reduce the vertical padding on the hero. Visitors found the previous
     padding made the card feel too tall; a smaller value keeps the
     section neat and prevents it from dominating the viewport. */
  padding:36px 24px;
  border-radius:calc(var(--radius) + 8px);
  /* Use the secondary panel colour for the hero background to help it
     stand out from the white page. A very light grey tint inspired by
     Notion’s neutral palette adds subtle depth without introducing
     additional colours. */
  background: var(--panel-2);
  border:1px solid var(--card-border);
  box-shadow: var(--shadow-1);
  /* Center the contents of all hero sections so that the heading
     and subtitle align consistently. Without this, the title would
     align left while the paragraph was centred, causing a visual
     disconnect. */
  text-align:center;
}
/* The hero originally displayed a large Notion logo. Hide this logo so the
   focus stays on your brand and message. */
.hero-logo{
  display:none !important;
}

/* Brand pill shown inside the hero. This replaces the older navbar brand on
   the landing page, giving your site name a prominent yet tasteful
   presence at the top of the hero. The pill uses the primary colour
   palette and a soft shadow for depth. */
/*
  Brand pill shown inside the hero. The font size has been reduced
  slightly to prevent the site name from overpowering the hero
  heading. Previously the maximum font size capped at 22px which
  felt large when the brand contained longer words or possessive
  forms like "Notomantra's". Reducing the clamp values makes the
  brand more proportional to the rest of the hero content without
  sacrificing readability on small screens.
*/
.hero-brand{
  display:inline-block;
  padding:8px 14px;
  border-radius:12px;
  font-weight:800;
  /* Decrease overall size: allow 14–18px on mobile and scale with viewport */
  font-size: clamp(14px, 3vw, 18px);
  letter-spacing:-.02em;
  color:#fff;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  /* Darken the pill shadow to match the black accent palette */
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  margin-bottom:16px;
}
/*
  The primary hero heading has been scaled down. Many users found
  that the original clamp (28px–44px) produced overly large
  headlines on desktop screens which dominated the page. Tweaking
  the clamp values results in a more balanced heading that still
  scales responsively across devices. The line height and letter
  spacing remain unchanged.
*/
.hero h1{
  margin:0 0 10px;
  /* 24px minimum on mobile, scale with viewport, cap at 36px on large screens */
  /* Reduce the heading size slightly to prevent it from overwhelming the page */
  font-size: clamp(24px, 4vw, 36px);
  line-height:1.15;
  letter-spacing:-.02em;
}
/*
  Paragraphs inside the hero are now centred and constrained to a
  comfortable reading width. This ensures that long subtitles or
  descriptions wrap neatly and align visually beneath the centred
  heading. The maximum width prevents overly long line lengths on
  desktop screens while auto margins keep the text centred.
*/
.hero p{
  margin:0 auto 24px;
  color:var(--text-dim);
  /* Increase subtitle size slightly to improve readability */
  font-size: clamp(16px, 2.5vw, 20px);
  max-width:70ch;
  text-align:center;
}
.hero .actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }

/* ---------- Sections ---------- */
.section{ margin-top:28px }
.section h2{ font-size:22px; margin:0 0 10px; letter-spacing:-.01em }
.section p.description{ color:var(--text-dim); margin:0 0 20px }

/* ---------- Cards and grids ---------- */
.card{
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  /* Ensure featured badges can be positioned relative to the card */
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow: var(--shadow-1);
  overflow:hidden;
  transition: transform var(--speed-2), box-shadow var(--speed-2)
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2) }
.card img{ display:block; width:100%; height:auto }

/*
  Badge displayed on product cards that are marked as featured. This
  appears in the top-left corner of the card and helps draw
  attention to key offerings without relying on ratings or sales
  numbers. The parent card must be positioned relatively.
*/
.tag-featured{
  position:absolute;
  top:8px;
  left:8px;
  /* Use the root primary colour so featured badges remain black even if the
     admin overrides the accent colours. */
  background:var(--primary);
  color:#fff;
  padding:4px 8px;
  font-size:12px;
  font-weight:600;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  pointer-events:none;
}

/*
  Small meta information badges shown beneath the summary on product
  cards. These indicate whether a template includes a video
  walkthrough or additional gallery images. Using subtle chips helps
  highlight real features without inventing ratings or sales numbers.
*/
.card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  color:var(--text-dim);
  margin-top:4px;
}
.card-meta .meta-item{
  padding:4px 8px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--panel-2);
  white-space:nowrap;
}

/*
  Layout and spacing for the inner content of product cards. Without
  padding the text and buttons in the cards were flush against the
  border, creating a cramped appearance. Introducing padding and
  vertical spacing ensures better legibility and a more polished look.
*/
.card-content{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/*
  Arrange the action buttons in product cards horizontally with a
  consistent gap. The margin‑top:auto pushes the buttons to the bottom
  of the card content, keeping the title, summary and price grouped
  together at the top.
*/
.card-buttons{
  margin-top:auto;
  display:flex;
  gap:10px;
}

/*
  Highlight links in the hero to provide quick access to sections like
  Featured Products or specific categories. These chips sit below the
  main hero heading and subtitle. They use a soft background and
  border with subtle hover effects to invite interaction.
*/
.hero-highlights{
  /* Reduce space between the hero subtitle and the highlight chips */
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  /* Center the category chips under the hero so they align with the centred
     heading and subtitle. Without this the chips hug the left edge,
     leaving awkward white space on the right. */
  justify-content:center;
}
.hero-highlights a{
  padding:8px 12px;
  border-radius:12px;
  font-size:14px;
  background:var(--panel-2);
  border:1px solid var(--card-border);
  color:var(--text);
  text-decoration:none;
  transition:background var(--speed-1), color var(--speed-1), transform var(--speed-1);
}
.hero-highlights a:hover{
  /* Invert the highlight chips on hover: dark background with white text */
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px);
}

.grid{ display:grid; gap:20px }
@media(min-width:640px){ .grid.grid-2{ grid-template-columns: repeat(2,1fr) } }
@media(min-width:768px){ .grid.grid-3{ grid-template-columns: repeat(3,1fr) } }
@media(min-width:1024px){ .grid.grid-4{ grid-template-columns: repeat(4,1fr) } }

/* OVERRIDE: make product/category cards less squished */
@media(min-width:640px){
  .grid.grid-2{ grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); }
}
@media(min-width:768px){
  .grid.grid-3{ grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); }
}
@media(min-width:1024px){
  .grid.grid-4{ grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); }
}


/* ---------- Featured list ---------- */
.featured-list{ display:flex; flex-direction:column; gap:24px }
.featured-item{
  display:flex; flex-direction:column; gap:18px;
  border:1px solid var(--card-border); border-radius:20px; background:var(--panel);
  padding:18px; box-shadow: var(--shadow-1)
}
@media(min-width:768px){ .featured-item{ flex-direction:row; padding:22px } }

.featured-media{
  flex:1 1 55%;
  /* Neutral gradient to replace the previous purple/blue tint on media frames */
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  border-radius:16px; padding:14px;
}
.featured-content{ flex:1 1 45%; display:flex; flex-direction:column; gap:10px }
.featured-content h3{ margin:0; font-size:20px }
.featured-content p.summary{ margin:0; color:var(--text-dim) }
.featured-buttons{ margin-top:auto; display:flex; gap:10px }

/* ---------- Laptop frame (massive overhaul) ---------- */
/* Keep existing .device-frame markup but restyle to a realistic MacBook-like laptop */
.device-frame{
  position:relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  /*
    For the light theme the laptop casing uses a very pale grey with
    a soft border and subtle shadow. This maintains the illusion of a
    physical frame without overwhelming the light page.
  */
  background: #f3f4f8;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 4px rgba(0,0,0,.1) inset, 0 20px 40px rgba(0,0,0,.15);
  overflow:hidden;
  isolation:isolate;
}
/* Screen glass */
.device-frame::before{
  content:"";
  position:absolute; inset:6px 6px auto 6px; height:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  border-radius: 12px 12px 0 0;
  pointer-events:none;
}
/* Camera + notch */
.device-frame .camera{ display:none } /* in case existing markup is present */
.device-frame::after{
  content:"";
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:64px; height:8px; border-radius:8px;
  background: linear-gradient(180deg, #e9eaf0, #dfe2ea);
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset, 0 6px 16px rgba(0,0,0,.2);
}
/* Base/keyboard illusion */
.device-stand{ display:none }

/*
  Promo code banner used on the home page. This panel appears near the
  bottom of the landing page to advertise a launch discount. It uses
  subtle colours so it doesn’t overpower the surrounding content but
  still stands out thanks to the background tint and border. The code
  itself is bolded for emphasis. An asterisk at the end of the line is
  styled via a small class to shrink it and align with typographic
  conventions.
*/
.promo-code {
  margin: 40px auto;
  padding: 20px 24px;
  max-width: 680px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--panel-2);
  text-align: center;
  font-size: 16px;
  color: var(--text-dim);
}
.promo-code strong {
  color: var(--primary);
  font-weight: 700;
}
.promo-code .asterisk {
  font-size: 12px;
  vertical-align: super;
}
.device-frame + .laptop-base{ display:none } /* keep compatibility */
.device-frame{
  /* create base using drop-shadow of a pseudo element on child wrapper */
}
.device-frame > iframe,
.device-frame > video,
.device-frame > img{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; border-radius: 12px; display:block;
  object-fit: cover;
  background: var(--bg);
}
/* Subtle desk reflection under the laptop */
.featured-media{ position:relative }
.featured-media::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-14px; height:14px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.15), transparent 70%);
  filter: blur(2px);
}

/* ---------- Product page tweaks ---------- */
#product-root .hero{ margin-top:12px }
/*
  Tweak the product detail hero heading and summary. The heading
  inherits the same scaled-down values used on the home hero for
  consistency. The summary paragraph is centred and constrained
  to a reasonable width with auto margins so that it aligns
  visually beneath the centred heading. This prevents the title
  from appearing centred while the summary hugs the left edge.
*/
#product-root .hero h1{
  font-size: clamp(24px, 4vw, 36px);
}
#product-root .hero p{
  max-width: 70ch;
  margin: 0 auto 24px;
  text-align: center;
  /* Use the dimmed text colour for product summaries. Darker hero backgrounds
     can make full‑strength text appear too heavy, while the dim tone
     provides adequate contrast without overpowering the header. */
  color: var(--text-dim);
}

/* Centre the call‑to‑action on the product page. Without this rule
   the Buy Now button aligns to the left, making the section feel
   unfinished. By auto–marging the primary button we ensure it sits
   centrally within its container. */
#product-root .section a.btn-primary{
  margin-left:auto;
  margin-right:auto;
}

#product-root .section .card{ background: var(--panel-2) }

/* ---------- Admin polish (non-breaking) ---------- */
#admin-root .section{
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:18px; margin-bottom:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
#admin-root label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px }
#admin-root input, #admin-root textarea{
  width:100%; padding:10px 12px; color:var(--text);
  /* Light background for inputs on the admin dashboard */
  background: var(--panel-2);
  border:1px solid var(--card-border);
  border-radius:12px;
  outline:none; transition:border-color var(--speed-1), box-shadow var(--speed-1)
}
#admin-root input:focus, #admin-root textarea:focus{ border-color:var(--ring); box-shadow:0 0 0 4px var(--ring) }

/* ---------- Subscribe form ---------- */
/*
  Style the subscription form so that the email input aligns with the
  subscribe button. The form uses a flex layout to ensure both
  elements share the same height and overall appearance. Rounded
  corners wrap the pair, with the input taking up available space and
  the button maintaining a consistent width. When focusing the input
  the border colour matches the ring used elsewhere.
*/
.subscribe-form{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  max-width:420px;
  margin-top:12px;
  box-shadow: var(--shadow-1);
  border-radius:12px;
  overflow:hidden;
}
.subscribe-form input[type="email"]{
  flex:1;
  border:1px solid var(--card-border);
  border-right:0;
  padding:12px 16px;
  font-size:15px;
  background: var(--panel-2);
  color: var(--text);
  outline:none;
}
.subscribe-form input[type="email"]:focus{
  border-color: var(--ring);
  box-shadow:0 0 0 3px var(--ring);
}
.subscribe-form .btn-primary{
  border-radius:0;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* ---------- Media toggle ---------- */
/*
  Device frames that contain both a video and an image become
  toggleable. Add a pointer cursor to signal interactivity. The
  toggle functionality is wired up in site.js.
*/
.device-frame.media-toggle{
  cursor:pointer;
}

/*
  A small floating button that sits inside a media frame when both
  video and image are available. It allows users to switch between
  the two without having to click on the embedded YouTube player
  (which would intercept the click event). The button updates its
  label based on the currently visible media.
*/
/* The toggle button that switches between video and image. It sits
   below the device frame in a flex container, so it doesn’t cover
   the embedded YouTube iframe. */
/* Toggle button overlaid on the device frame. Positioned near the top
   left so it does not interfere with YouTube controls. */
.media-toggle-btn{
  position:absolute;
  top:8px;
  left:8px;
  z-index:5;
  padding:4px 8px;
  font-size:11px;
  line-height:1;
  border:none;
  border-radius:6px;
  background: var(--panel-2);
  color: var(--text);
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  cursor:pointer;
  transition: background var(--speed-1), box-shadow var(--speed-1);
}
.media-toggle-btn:hover{
  background: var(--panel);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ---------- Footer ---------- */
footer{
  margin-top: 36px; border-top:1px solid var(--card-border);
  padding:20px 0; color:var(--text-dim)
}
footer p{ text-align:center; margin:0 }

/* Remove newsletter block everywhere */
.subscribe-section { display: none !important; }

/* Lock the footer to a static line (hides whatever JS injects) */
.site-footer > * { display: none !important; }
.site-footer::before {
  content: "© 2025 Notomantra. Contact us at hello@notomantra.com for queries or custom orders";
  display: block;
  white-space: pre-wrap;
}