css/style.css

   1 /**
   2  * If using a CSS pre-processor, tell it to overwrite this file. If not, place
   3  * your custom CSS modifications here.
   4  */
   5
   6 /* Lato font */
   7
   8 @font-face {
   9     font-family: "Lato";
  10     src: url("../fonts/Lato-Regular.ttf") format('truetype');
  11     font-weight: 400;
  12     font-style: normal;
  13 }
  14
  15 @font-face {
  16     font-family: "Lato";
  17     src: url('../fonts/Lato-RegularItalic.ttf') format('truetype');
  18     font-weight: 400;
  19     font-style: italic;
  20 }
  21
  22 @font-face {
  23     font-family: "Lato";
  24     src: url('../fonts/Lato-Bold.ttf') format('truetype');
  25     font-weight: 700;
  26     font-style: normal;
  27 }
  28
  29
  30 /* Universal */
  31
  32 body {
  33   font-family: "Lato", Helvetica, Arial, sans-serif;
  34   margin: 0;
  35   min-width: 320px;
  36 }
  37
  38 a { transition: 0.3s; }
  39
  40 section { position: relative; }
  41
  42 /* etcetera */
  43
  44 .visually-hidden.focusable:focus {
  45     position: absolute !important;
  46     background: #000;
  47     color: #FFF;
  48     padding: 0.5em;
  49     z-index: 9999;
  50 }
  51
  52 .main-container { min-height: 50vh; }
  53
  54 h2.block-title {
  55   background: #000;
  56   color: #FFF;
  57   padding: 0.5em;
  58 }
  59
  60 h2.block-title a:visited,
  61 h2.block-title a:focus,
  62 h2.block-title a:active,
  63 h2.block-title a {
  64   color: #DDCC00;
  65 }
  66
  67 h2.block-title a:hover {
  68   color: #FFF;
  69 }
  70
  71 .feed-icons a {
  72   background: url('../images/rss.svg') top left no-repeat;
  73   background-size: contain;
  74   height: 20px;
  75   overflow: hidden;
  76   display: block;
  77   text-indent: 25px;
  78   font-size: 1em;
  79   width: fit-content;
  80   margin-top: 1em;
  81   float: right;
  82 }
  83
  84 .view-display-id-news_page .feed-icons a {
  85   margin-top: -30px;
  86 }
  87
  88 .more-link {
  89   border: 1px solid #ddd;
  90   border-radius: .5em;
  91   padding: .5em;
  92   text-align: center;
  93   width: 50%;
  94   margin: 0 auto;
  95   font-weight: bold;
  96   margin-top: 2em;
  97 }
  98
  99 .more-link:hover {
 100   background: #EEE;
 101   color: #000;
 102 }
 103
 104 .block-views {
 105   margin-top: 20px;
 106 }
 107
 108 /* Navbar */
 109
 110 .navbar-default {
 111   background: #000;
 112   color: #FFF;
 113   border: none;
 114   border-radius: 0px;
 115   box-sizing: content-box;
 116   align-items: center;
 117   min-height: 100px;
 118 }
 119
 120 .navbar-header,
 121 #navbar-collapse {
 122   max-width: 1150px;
 123   padding: 0;
 124   margin: 0 auto;
 125   border: none;
 126   overflow: hidden;
 127 }
 128
 129 .navbar-default .navbar-toggle { display: none; }
 130
 131 .navbar-header {
 132   position: absolute;
 133   top: 5px;
 134 }
 135
 136 .navbar-brand { display: none; }
 137
 138 #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
 139
 140 .navbar-default .navbar-nav > li > a:focus {
 141   outline: none;
 142 }
 143
 144 .navbar-default .navbar-nav > li > a,
 145 .navbar-default .navbar-nav > li > a:link,
 146 .navbar-default .navbar-nav > li > a:visited {
 147   color: #FFF;
 148   background: #000;
 149   border-bottom: 2px solid transparent;
 150   padding-bottom: 10px;
 151   margin-bottom: 5px;
 152 }
 153
 154 .navbar-default .navbar-nav > li > a:focus,
 155 .navbar-default .navbar-nav > li.active > a:hover,
 156 .navbar-default .navbar-nav > li > a:hover {
 157   color: #DDCC00;
 158   background: #000;
 159   border-bottom: 2px solid #DDCC00;
 160   padding-bottom: 5px;
 161   margin-bottom: 10px;
 162 }
 163
 164 .navbar-default .navbar-nav > li > a.is-active {
 165   border-bottom: 2px solid #FFF;
 166   background: #000;
 167   padding-bottom: 5px;
 168   margin-bottom: 10px;
 169 }
 170
 171 .page-header {
 172   border-bottom: 2px solid #000;
 173   font-size: 2em;
 174 }
 175
 176 .region-header .search-block-form {
 177   width: 300px;
 178   float: right;
 179 }
 180
 181 nav .search-block-form {
 182   position: absolute;
 183   width: 300px;
 184   right: 10%;
 185   top: 30px;
 186 }
 187
 188 /*
 189  *  @media screen and (min-width: 520px) and (max-width: 599px) {
 190  *   .logo img { margin-left: 50px; }
 191  *   #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
 192  * }
 193  *
 194  * @media screen and (min-width: 600px) and (max-width: 767px) {
 195  *   .logo img { margin-left: 100px; }
 196  *   #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
 197  * }
 198  *
 199  * @media screen and (max-width: 767px) {
 200  *   .logo img { height: 150px; margin-top: 25px; }
 201  *   .navbar-default { min-height: 230px; margin-bottom: 30px; }
 202  *   #block-ryf-main-menu .navbar-nav { max-width: 130px; }
 203  * }
 204  *
 205  */
 206
 207 @media screen and (min-width: 768px) {
 208
 209   .navbar-default {
 210      margin-bottom: 100px;
 211   }
 212   .navbar-nav {
 213      margin-top: 40px;
 214   }
 215   .region-header .breadcrumb {
 216     position: absolute;
 217     top: -70px;
 218     left: 200px;
 219     background: none;
 220   }
 221   .region-navigation-collapsible .search-block-form {
 222     float: right;
 223     padding-top: 30px;
 224     width: 210px;
 225   }
 226 }
 227
 228
 229 /* Selectors */
 230
 231
 232 @media screen and (min-width: 768px) {
 233   .form-inline .form-item .select-wrapper {
 234     display: block;
 235   }
 236   .form-inline .form-actions {
 237     margin-top: 21px;
 238   }
 239 }
 240
 241 /* News */
 242
 243 .view-news article {
 244   padding: 0.5em;
 245   margin: 0 10%;
 246 }
 247
 248 .view-news p {
 249   line-height: 1.5em;
 250   font-size: 1.1em;
 251 }
 252
 253 .view-news .node-readmore {
 254   padding: 0.5em 1em;
 255   border: 1px solid #DDD;
 256   border-radius: 0.5em;
 257   float: right;
 258 }
 259
 260 .view-news .node-readmore:hover {
 261   background: #EEE;
 262   color: #000;
 263 }
 264
 265 .view-news footer {
 266   color: #999;
 267   padding: 0.5em;
 268   text-align: right;
 269 }
 270
 271
 272 /* RYF List */
 273
 274
 275 .ryf-list-row {
 276   padding: 0;
 277   margin: 0 auto;
 278   overflow: auto;
 279 }
 280
 281 .ryf-list {
 282   float: left;
 283   margin: 0;
 284   padding: 0.5em;
 285   position: relative;
 286   list-style: none;
 287 }
 288
 289 .ryf-list article {
 290   border: 1px solid #bbb;
 291   border-radius: 5px;
 292   padding: 1em;
 293   box-shadow: 2px 2px 5px #ddd;
 294   transition: 0.3s;
 295 }
 296
 297 .ryf-list article:hover {
 298   box-shadow: 0px 0px 5px #aaa;
 299 }
 300
 301 .ryf-list .field--type-image {
 302   border: 1px solid #ddd;
 303   border-left: 0px;
 304   border-right: 0px;
 305   background: #fff;
 306   height: 150px;
 307   width: 100%;
 308   overflow: hidden;
 309   border-radius: 5px;
 310   position: relative;
 311   text-align: center;
 312 }
 313
 314 .ryf-list img {
 315   width: auto;
 316   height: 100%;
 317   margin: auto 0;
 318   display: inline-block;
 319 }
 320
 321 .ryf-list h2 {
 322   text-align: left;
 323   font-size: 1.5em;
 324   line-height: 1.2em;
 325   margin: 0;
 326   padding: 0;
 327 }
 328
 329 .ryf-list .field--name-body {
 330   display: block;
 331   border-radius: 5px;
 332   width: 100%;
 333   height: 0px;
 334   margin-top: 0px;
 335   z-index: 99;
 336   position: relative;
 337   background: #00000088;
 338   color: white;
 339   padding: 0em;
 340   transition: 0.2s;
 341   cursor: default;
 342   overflow: hidden;
 343 }
 344
 345 .ryf-list:hover .field--name-body {
 346   height: 100px;
 347   margin-top: -100px;
 348   z-index: 99;
 349   position: relative;
 350   padding: 0.3em;
 351   transition: 0.3s;
 352 }
 353
 354 .ryf-list a {
 355   color: #337AB7;
 356 }
 357
 358 .ryf-list a:hover {
 359   color: #000;
 360 }
 361
 362 .ryf-list .list-inline li {
 363   font-size: 0.9em;
 364   border: 1px solid #ddd;
 365   width: auto;
 366   border-radius: 0.5em;
 367   padding: 0.3em 0.5em;
 368   margin-top: 5px;
 369   float: right;
 370 }
 371
 372 .ryf-list h2 a {
 373   display: inline-block;
 374   height: 55px;
 375   overflow: hidden;
 376   position: relative;
 377 }
 378
 379 .ryf-list h2 a:after {
 380   content: '(...)';
 381   float: right;
 382   display: block;
 383   position: absolute;
 384   bottom:5px;
 385   right: 2px;
 386   font-size: 0.8em;
 387 }
 388
 389 .ryf-list .list-inline li:hover {
 390   background: #eee;
 391 }
 392
 393 @media screen and (min-width: 450px) and (max-width: 659px) {
 394   .ryf-list-row {
 395     max-width: 600px;
 396   }
 397   .ryf-list {
 398     max-width: 300px;
 399     float: none;
 400     margin: 0 auto;
 401   }
 402 }
 403 @media screen and (min-width: 660px) and (max-width: 767px) {
 404   .ryf-list-row {
 405     max-width: 600px;
 406   }
 407   .ryf-list-row {
 408     margin: 0 auto;
 409     max-width: 660px;
 410   }
 411   .ryf-list {
 412     max-width: 300px;
 413     float: left;
 414   }
 415   .auto-clear .col-xs-12:nth-child(odd){clear:left;}
 416 }
 417
 418 @media screen and (min-width: 55em) {
 419
 420   .ryf-list article {
 421       min-height: 270px
 422   }
 423
 424 }
 425
 426
 427 /* Vendors list */
 428
 429
 430 .vendors-list-row {
 431   padding: 10px;
 432   margin: 0 auto;
 433   overflow: auto;
 434 }
 435
 436 @media screen and (max-width: 767px) {
 437   .vendors-list-row {
 438     margin: 0px auto;
 439   }
 440
 441   .vendors-list {
 442     margin-bottom: 40px;
 443     list-style: none;
 444
 445     overflow: auto;
 446   }
 447
 448   .vendors-list .views-field-field-icon {
 449     width: 220px;
 450
 451     margin: 0px auto 20px auto;
 452   }
 453
 454   .vendors-list .views-field-field-icon img {
 455     margin: 0 auto;
 456   }
 457
 458   .vendors-list .views-field-name,
 459   .vendors-list .views-field-field-description-summary,
 460   .vendors-list .views-field-description__value {
 461     max-width: 300px;
 462     margin: 0 auto 10px auto;
 463   }
 464
 465   .vendors-list .views-field-name {
 466     font-weight: bold;
 467     font-size: 18px;
 468     text-align: center;
 469   }
 470
 471 }
 472
 473 @media screen and (min-width: 768px) {
 474   .vendors-list-row {
 475     width: 600px;
 476     margin: 0px auto;
 477   }
 478
 479   .vendors-list {
 480     list-style: none;
 481     clear: left;
 482
 483     overflow: auto;
 484   }
 485
 486   .vendors-list .views-field-field-icon {
 487     width: 220px;
 488     height: 220px;
 489
 490     margin-bottom: 40px;
 491
 492     float: left;
 493   }
 494
 495   .vendors-list .views-field-field-icon img {
 496     margin: 0 auto;
 497   }
 498
 499   .vendors-list .views-field-name,
 500   .vendors-list .views-field-field-description-summary,
 501   .vendors-list .views-field-description__value {
 502     margin-left: 300px;
 503   }
 504
 505   .vendors-list .views-field-name {
 506     margin-bottom: 10px;
 507     font-weight: bold;
 508     font-size: 18px;
 509   }
 510 }
 511
 512
 513 /* Sidebars */
 514
 515
 516 @media screen and (max-width: 767px) {
 517   .path-products #block-views-block-categories-categories-block { display: none; }
 518 }
 519
 520
 521 /* Vendor and Category taxonomy term pages */
 522
 523
 524 .view-taxonomy-term .view-header .field--name-field-icon img {
 525   margin: 0 auto;
 526 }
 527
 528 .view-filters {
 529   clear: left;
 530 }
 531
 532 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 533 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 534   margin-top: 15px;
 535 }
 536
 537 @media screen and (max-width: 559px) {
 538   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 539     margin: 0 auto 40px auto;
 540     overflow: auto;
 541   }
 542
 543   .view-taxonomy-term .view-header .field--name-field-icon {
 544     margin: 0 auto 20px auto;
 545     width: 220px;
 546   }
 547
 548   .view-taxonomy-term .view-header .field--name-description,
 549   .view-taxonomy-term .view-header .field--name-field-description-summary,
 550   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 551   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 552     max-width: 360px;
 553     margin: 15px auto 0 auto;
 554     padding: 0 10px;
 555   }
 556
 557 }
 558
 559 @media screen and (min-width: 560px) {
 560   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 561     margin: 0 0 40px 0;
 562     overflow: auto;
 563   }
 564
 565   .view-taxonomy-term .view-header .field--name-field-icon {
 566     width: 220px;
 567     float: left;
 568   }
 569
 570   .view-taxonomy-term .view-header .field--name-description,
 571   .view-taxonomy-term .view-header .field--name-field-description-summary,
 572   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 573   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 574     margin-left: 260px;
 575   }
 576
 577 }
 578
 579 @media screen and (min-width: 768px) {
 580   .view-taxonomy-term .view-header {
 581     max-width: 700px;
 582   }
 583 }
 584
 585
 586 /* Product */
 587
 588
 589 @media screen and (max-width: 767px) {
 590   .page-node-type-product .product {
 591     max-width: 382px;
 592     margin: 0 auto;
 593   }
 594 }
 595
 596 @media screen and (min-width: 768px) and (max-width: 991px) {
 597   .page-node-type-product .product {
 598     width: 700px;
 599     margin: 0 auto;
 600   }
 601 }
 602
 603 @media screen and (min-width: 992px) {
 604   .page-node-type-product .product {
 605     width: 800px;
 606     margin: 0 auto;
 607   }
 608 }
 609
 610 .page-node-type-product .product .field--name-field-image {
 611   padding: 10px;
 612
 613   border: 1px solid #888;
 614   border-radius: 10px;
 615 }
 616
 617 .page-node-type-product .product .field--name-field-image img {
 618   margin: 0 auto;
 619 }
 620
 621 .page-node-type-product .product .field--name-field-extra-images {
 622   padding: 5px;
 623   display: flex;
 624   align-items: center;
 625   border: 1px solid #888;
 626   border-radius: 10px;
 627 }
 628
 629 .page-node-type-product .product .field--name-field-extra-images .field--item {
 630   display: inline-block;
 631   margin: auto;
 632   padding: 5px;
 633 }
 634
 635 .page-node-type-product .product .field--name-field-categories,
 636 .page-node-type-product .product .field--name-field-vendor {
 637   margin: 10px 10px 20px 0px;
 638   padding: 10px;
 639   border: 1px solid #888;
 640   border-radius: 10px;
 641 }
 642
 643 .page-node-type-product .product .field--name-field-categories .field--item {
 644   display: list-item;
 645   list-style: circle;
 646   margin-left: 15px;
 647 }
 648
 649 #block-views-block-categories-categories-block ul {
 650   margin: 0; padding: 0 10px;
 651   list-style: none;
 652 }
 653
 654 #block-views-block-categories-categories-block li {
 655   padding: 5px 10px;
 656   border: 1px solid #DDD;
 657   border-radius: 5px;
 658   list-style: none;
 659   margin: 5px 0;
 660 }
 661
 662 #block-views-block-categories-categories-block li:hover {
 663   background: #EEE;
 664   color: #000;
 665 }
 666
 667 #block-views-block-categories-categories-block a {
 668   width: 100%;
 669   display: block;
 670 }
 671
 672 /* product page colors */
 673 .page-node-type-product .product .field--name-field-image {
 674   background-color: #fff;
 675   border-color: #aaa;
 676 }
 677 .page-node-type-product .product .field--name-field-extra-images {
 678   background-color: #f3f3f3;
 679   border-color: #aaa;
 680 }
 681 .page-node-type-product .product .field--name-field-categories {
 682   background-color: #def;
 683   border-color: #8ad;
 684 }
 685 .page-node-type-product .product .field--name-field-vendor {
 686   background-color: #dfe;
 687   border-color: #8da;
 688 }
 689
 690 @media screen and (max-width: 767px) {
 691   .page-node-type-product .product .field--name-field-extra-images {
 692     margin: 10px auto 0px auto;
 693   }
 694
 695   .page-node-type-product .product .field--name-body,
 696   .page-node-type-product .product .field--name-field-vendor-product-link,
 697   .page-node-type-product .product .field--name-field-certification-details,
 698   .page-node-type-product .product .field--name-field-certification-date,
 699   .page-node-type-product .product .field--name-field-source-code-links {
 700     margin-bottom: 20px;
 701   }
 702
 703   .page-node-type-product .product .field--name-field-categories,
 704   .page-node-type-product .product .field--name-field-vendor {
 705     margin-bottom: 0px;
 706     float: left;
 707   }
 708
 709   .page-node-type-product .product .field--name-body {
 710     padding-top: 20px;
 711     clear: both;
 712   }
 713 }
 714
 715
 716 @media screen and (min-width: 768px) {
 717   .page-node-type-product .product .field--name-field-image {
 718     width: 382px;
 719     float: left;
 720   }
 721
 722   .page-node-type-product .product .field--name-field-extra-images {
 723     float: left;
 724     clear: left;
 725     width: 382px;
 726     margin-top: 10px;
 727   }
 728
 729   .page-node-type-product .product .field--name-body,
 730   .page-node-type-product .product .field--name-field-vendor-product-link,
 731   .page-node-type-product .product .field--name-field-certification-details,
 732   .page-node-type-product .product .field--name-field-certification-date,
 733   .page-node-type-product .product .field--name-field-source-code-links {
 734     margin-left: 400px;
 735     margin-bottom: 20px;
 736   }
 737
 738   .page-node-type-product .product .field--name-field-categories {
 739     float: left;
 740     clear: left;
 741   }
 742
 743   .page-node-type-product .product .field--name-field-vendor {
 744     float: left;
 745   }
 746
 747 }
 748
 749
 750 /* News and Product Announcements */
 751
 752
 753 .page-node-type-product-announcement .page-header,
 754 .page-node-type-product-announcement .tabs--primary,
 755 .page-node-type-product-announcement .region-content,
 756 .page-node-type-general-news-item .page-header,
 757 .page-node-type-general-news-item .tabs--primary,
 758 .page-node-type-general-news-item .region-content,
 759 .page-node-type-page .page-header,
 760 .page-node-type-page .tabs--primary,
 761 .page-node-type-page .region-content,
 762 .path-news .page-header,
 763 .path-news .tabs--primary,
 764 .path-news .region-content {
 765   max-width: 800px;
 766   margin: 0 auto;
 767 }
 768
 769 /* don't apply above max-width rule to main page */
 770 .path-frontpage .page-header,
 771 .path-frontpage .tabs--primary,
 772 .path-frontpage .region-content {
 773   max-width: 2000px; /* high number beyond the max */
 774 }
 775
 776 .page-node-type-page .page-header {
 777   margin-bottom: 20px;
 778 }
 779
 780 .path-news h2,
 781 .block-views-blocknews-news-block article h2 {
 782   font-size: 25px;
 783 }
 784
 785 .page-node-type-product-announcement .author,
 786 .page-node-type-general-news-item .author {
 787   margin: 10px 0 20px 0;
 788   font-style: oblique;
 789 }
 790
 791 .page-node-type-product-announcement .field--name-body,
 792 .page-node-type-general-news-item .field--name-body {
 793   margin-bottom: 20px;
 794 }
 795
 796 .page-node-type-product-announcement .field--name-field-external-news-link,
 797 .page-node-type-general-news-item .field--name-field-external-news-link {
 798   margin-bottom: 20px;
 799 }
 800
 801 .page-node-type-product-announcement .field--name-field-vendor-page,
 802 .page-node-type-product-announcement .field--name-field-announced-products {
 803   margin-bottom: 20px;
 804 }
 805
 806
 807 /* Search Results */
 808
 809
 810 @media screen and (max-width: 600px) {
 811   .path-search .region-content > ol {
 812     width: 300px;
 813   }
 814 }
 815 @media screen and (min-width: 601px) and (max-width 1000px) {
 816   .path-search .region-content > ol {
 817     width: 560px;
 818   }
 819 }
 820 @media screen and (min-width: 1001px) {
 821   .path-search .region-content > ol {
 822     width: 900px;
 823   }
 824 }
 825
 826 .path-search .region-content > ol {
 827   margin: 0 auto;
 828   padding-left: 0;
 829   overflow: auto;
 830 }
 831
 832 .path-search .region-content > ol li {
 833   width: 280px;
 834   height: 280px;
 835   margin: 0px auto;
 836   padding: 10px;
 837
 838   float: left;
 839
 840   list-style: none;
 841   overflow: hidden;
 842 }
 843
 844 .path-search .region-content > ol li h3 {
 845   text-align: center;
 846 }
 847
 848 .path-search .region-content > ol li .search-image {
 849   width: 100px;
 850   height: 100px;
 851
 852   margin: 0 auto;
 853
 854   display: flex;
 855   align-items: center;
 856 }
 857
 858 .path-search .region-content > ol li img {
 859 }
 860
 861
 862 /* Footer */
 863
 864 .footer {
 865   background: #333;
 866   color: #FFF;
 867 }
 868
 869 /* full page width for footer */
 870
 871 .footer {
 872   width: 100%;
 873 }
 874
 875 .footer a { color: #DDCC00; }
 876
 877 .footer a:hover { color: #FFF; }
 878
 879 .footer h4 { font-weight: bold; }
 880
 881 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 882
 883 #fsf-logo-footer { margin-bottom: 10px; }
 884
 885 @media print { #fsf-logo-footer { filter: invert(100%) } }
 886