Style Guide

Η παλέτα είναι σκόπιμα μονόχρωμη. Το μόνο έγχρωμο στοιχείο είναι το κόκκινο, κρατημένο αποκλειστικά για τα κουμπιά κράτησης — έτσι κάθε κόκκινο σημείο στη σελίδα «λέει» κλείσε ραντεβού.

Ιεραρχία γκρι κειμένου — πού χρησιμοποιείται κάθε απόχρωση. Μόνο τρεις είναι tokens (--hl, --ink, --muted)· οι ενδιάμεσες είναι σταθερές τιμές σε συγκεκριμένα σημεία.

Helvetica Neue, Helvetica, Arial, sans-serif — μία οικογένεια για όλα. Παρακάτω τα στυλ οργανωμένα ανά WordPress tag (H1–H4, Paragraph), όπως τα επιλέγει ο developer σε ένα Heading / Text element. Δίνονται μεγέθη Desktop → Mobile για να οριστούν ως global theme styles. Οι τίτλοι μένουν σε βάρος 400· έμφαση με πλάγια λευκά, όχι bold.

Έτοιμα design tokens — ίδια με το prototype (κάτω από .sf-root). Για WordPress/WPBakery, ο κώδικας μένει scoped κάτω από .sf-root ώστε να μην συγκρούεται με το theme.

/* Σώμα & Φως — design tokens */
.sf-root {
  /* color */
  --black: #000;        /* page background        */
  --ink: #f4f4f4;      /* primary text           */
  --muted: #9a9a9a;    /* secondary text         */
  --hl: #ffffff;       /* emphasis / active      */
  --red: #d6261f;      /* booking CTA ONLY       */
  --card: #111;        /* card / tile surface    */
  --line: #262626;     /* borders / dividers     */

  /* type — one family */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* layout */
  --gut: clamp(20px, 5vw, 40px);  /* shared gutter */
  --maxw: 1600px;

  background: var(--black);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* emphasis: italic white inside any heading */
.sf-root em { font-style: italic; color: var(--hl); }

/* primary CTA — actual selectors from the prototype.        */
/* the ONLY places red appears: .nav-cta, .mm-cta, .band a   */
.sf-root .band a {
  background: var(--red); color: #fff;
  text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; padding: 16px 34px;
  border-radius: 2px; transition: .2s;
}
.sf-root .band a:hover { background: #fff; color: var(--red); }
.sf-root .nav-cta { /* same, compact: padding 11px 18px, 11px text */ }